Creating a KnockoutJS observable with dynamic name

javascript, knockout.js

Solution

Javascript makes dynamic assignment and reflection simple with its object indexer:

var ViewModel = function(propName) {
    this[propName] = ko.observable("reflection");
};

ko.applyBindings(new ViewModel("dynamic"));

Here is a fiddle demonstrating the binding.

Problem

I'm using my own simple templating system for my app and will be loading an unknown number of the 'same' templates per page. So basically, I grab some data via an ajax call and get a uniqueId. I'm then loading a template into my page and applying ids and a data-bind="with: " using the uniqueId. ``` <div id="content-uniqueId"> <div data-bind="with: uniqueId"> ... </div> </div> ``` Then I call a function and am trying to create an observableArray using the uniqueId, so that it binds to my 'with'. Something like: ``` function(uniqueId) { var theObservable = uniqueId; theObservable = ko.observableArray(); // make the observable name equal to uniqueId // get some data theObservable(new data); } ``` I've created a JS Fiddle to help clear things up but it won't work because I'm not getting ajax data or passing a unique id. JS Fiddle here EDIT: Updated JS Fiddle, per Tyrsius' suggestion below. ``` this[uniqueId] = ko.observableArray(new entityApp.dataContext.EntityModel(data)); ``` Definitely one step close, but I'm getting an error: The argument passed when initializing an observable array must be an array, or null, or undefined But 'new entityApp.dataContext.EntityModel(data)' returns an object array, so it should be fine.

Original source