trouble creating jsfiddle with knockout

Question

I'm trying to create a jsfiddle using knockout, but I keep getting an error saying ko is undefined. I included a link to knockout, bit somehow jsfiddle not picking it up correctly. What am i doing wrong?

broken fiddle

var viewModel = {
self: this,
BudgetLine: ko.observableArray([
    {
    Id: 1,
    Title: "Budget #1",
    Account: ko.observableArray([
        {
        Id: 1,
        Value: ko.computed(function(item) {
            return self.Accounts[this.Id];

        })},
    {
        Id: 2,
        Value: ko.computed(function(item) {
            return self.Accounts[this.Id];

        })}

    ])},
{
    Id: 2,
    Title: "Budget #2",
    Account: ko.observableArray([
        {
        Id: 1},
    {
        Id: 2}


              ])}]),

Accounts: ko.observableArray([
    {
    Id: 1,
    Title: "Account #1"},
{
    Id: 2,
    Title: "Account #2"},
{
    Id: 3,
    Title: "Account #3"},
{
    Id: 2,
    Title: "Account #1"}

     ])

};

ko.applyBindings(viewModel);

The problem is that you have lots of simple JavaScript errors in your code. — Michael Best, Dec 01 '12 at 03:46

score 0 · Answer 1 · answered Dec 01 '12 at 03:51

You are correctly calling the ko library but your viewmodel is wrong

I forked your example and trimmed it down to show you a simplified example that the KO library is called correctly http://jsfiddle.net/rYJGB/

<table>
  <tbody data-bind="template: {name: 'budgets', foreach: BudgetLine}"></tbody>
</table>
<script id='budgets' type="text/html">
     <tr>
         <td><input type="text" data-bind="value:Title"></td>
     </tr>
</script>


var viewModel = {
    self: this,
    BudgetLine: ko.observableArray([
        { Id: 1,Title: "Budget #1"        },
         Id: 2,Title: "Budget #2"        }
        ])
};
ko.applyBindings(viewModel);

Rups · Answer 2 · 2012-12-01T07:45:00.030

There are many javascript errors present in the code.

I have forked the jsFiddle. Since there are other elements present in the view, which are not present in the view model, the errors for the same show up. I have deliberately left it like that, so that you can continue from where you had stopped. The basic idea on how to achieve it is present.

The jsFiddle is present http://jsfiddle.net/rupesh_kokal/k7LHu/3/

Below is the View (or html):

            <table>

                <tbody data-bind="template: {name: 'budgets', foreach: BudgetLine}">
                </tbody>
            </table>
            <script id='budgets' type="text/html">
                <tr>
                    <td>
                        <input type="text" data-bind="value:Title"></input>
                    </td>
                    <td>
                        <input type="text" data-bind="value:Amount"></input>
                    </td>

                    <td>
                        <span data-bind="text:Modified" />
                    </td>
                    <td>
                       <select data-bind="options:$root.Account,optionsCaption:'select Account', optionsText:'Title', OptionsValue:'Id', selectedOptions:Account().Id",size="5", multiple="true"></select>                        

                    </td>
                    <td>
                        <span data-bind="text:CostCenterId"></span>
                    </td>
                    <td>
                        <select data-bind="options:$root.Costcenter,optionsCaption:'cost center', optionsText:'Title', optionsValue:'Id', value:CostCenterId "></select>                         
                      </td>
                    <td>
                        <span data-bind="text:CostCenter().Company().Title"></span>
                    </td>

                    <td>
                        <input type="button" data-bind="click: $root.deleteItem" value="Delete" />
                        <input type="button" data-bind="click: $root.saveItem" value="save" />
                    </td>

                </tr>
            </script>

Below is the view model:

function ModViewModel() {
    var self = this;
    self.Accounts = ko.observableArray([
        {
        Id: 1,
        Title: "Account #1"},
    {
        Id: 2,
        Title: "Account #2"},
    {
        Id: 3,
        Title: "Account #3"},
    {
        Id: 2,
        Title: "Account #1"}

         ]);
    self.BudgetLine = ko.observableArray([]);

    self.BudgetLine.push(new BudgetLineItem(1, "Budget #1", [1, 2], self));
    self.BudgetLine.push(new BudgetLineItem(2, "Budget #2", [1, 2], self));

}


function BudgetLineItem(id, title, accountIds, parentModel) {
    var self = this;
    self.Id = id;
    self.Title = title;
    self.Account = ko.observableArray([]);

    if (accountIds.length > 0) {
        for (var i = 0, len = accountIds.length; i < len; i++) {
            self.Account.push(new AccountLineItem(accountIds[i], parentModel));
        }
    }
    else {
        self.Account.push(new AccountLineItem(accountIds, parentModel));
    }
}


function AccountLineItem(id, rootModel) {
    var self = this;
    self.Id = id;
    self.Value = ko.computed(function() {
        return rootModel.Accounts()[self.Id];
    });

}



ko.applyBindings(new ModViewModel());

Thanks, I cleaned up view to eleimnate the fields not in the model. Now I'm trying to bind the accounts to a dropdown list. The list of accounts appears correctly in the dropdaown, But i cant figure out the binding syntax to have the accounts that are selected for a budgetline appear as selected. http://jsfiddle.net/russellgove/2sLpZ/5/ — RussGove, Dec 01 '12 at 22:11
If Rups helped then accept his answer or at least bump his answer — mosesfetters, Dec 02 '12 at 04:01

trouble creating jsfiddle with knockout

2 Answers2