Knockout.js和JayData,foreach绑定选择不填充默认选项

时间:2014-01-24 14:04:15

标签: javascript knockout.js jaydata

我无法指定数据绑定以根据JayData实体正确设置默认选项。即使testcase.Category.Id值给出正确的值,也不会选择正确的选项。

这是一个明确说明此行为的简化示例:

的Javascript

// Jaydata

$data.Entity.extend("$org.types.TestCase", {
    Id: { type: "int", key: true, computed: true },
    Name: { type: "string", required: true },
    Class: { type: "string", required: true },
    Category: { type: "$org.types.Category", required: true },

});

$data.Entity.extend("$org.types.Category", {
    Id: { type: "int", key: true, computed: true },
    Name: { type: "string", required: true },
    Value: { type: "int", required: true }
});

$data.EntityContext.extend("$org.types.OrgContext", {
    TestCases: { type: $data.EntitySet, elementType: $org.types.TestCase },
    Categories: { type: $data.EntitySet, elementType: $org.types.Category }
});

var DB = new $org.types.OrgContext({ name: "webSql", databaseName: "Test"});

// Knockout

function TestViewModel() {
    var self = this;

    this.testcases = ko.observableArray([]);
    DB.TestCases.toArray(this.testcases);

    this.categories = ko.observableArray([]);
    DB.Categories.toArray(this.categories);
}

// jQuery

$(document).ready(function() {
    ko.applyBindings(new TestViewModel());
});

HTML

    <ul data-bind="foreach: {data: testcases, as: 'testcase'}">
        <li>
            <div><b>Name: </b><input data-bind="value: testcase.Name" /></div>
            <div><b>Class: </b><input data-bind="value: testcase.Class" /></div>
            <div><b>Category: </b>
                <select data-bind="options: $root.categories, optionsText: 'Name', optionsValue: 'Id', value: testcase.Category.Id">

                </select>
            </div>

        </li>

    </ul>
</body>

我也尝试过这种绑定,它表现出相同的行为:

data-bind="options: $root.categories, optionsText: 'Name', value: testcase.Category"

以下是我所包含的图书馆:

<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="js/knockout.js"></script>
<script type="text/javascript" src="js/jaydata/jaydata.js"></script>
<script type="text/javascript" src="js/jaydata/jaydataproviders/SqLiteProvider.js"></script>
<script type="text/javascript" src="js/jaydata/jaydatamodules/knockout.js"></script>
<script type="text/javascript" src="js/test.js"></script>

0 个答案:

没有答案