Question

我正在尝试使用knockout创建一个jsfiddle，但我一直收到错误，说ko未定义。我包括一个淘汰的链接，有点jsfiddle没有正确地捡起它。我做错了什么？

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（视图模型）;

Answer 1

您正在调用ko库，但您的viewmodel错误

我将您的示例分叉并将其修剪下来，向您展示一个简单的示例，即正确调用KO库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);

Answer 2

代码中存在许多javascript错误。

我已经分叉了jsFiddle。由于视图中存在其他元素（视图模型中不存在），因此会显示相同的错误。我故意这样离开，所以你可以从你停下的地方继续。关于如何实现它的基本思想是存在的。

jsFiddle存在http://jsfiddle.net/rupesh_kokal/k7LHu/3/

以下是View（或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>

以下是视图模型：

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());

用淘汰创建jsfiddle的麻烦

2 个答案: