1

我想将视图模型项绑定到集合中的 HTML 的一部分，该集合绑定到页面中的另一个 HTML。
这是我的示例 HTML 和 JS 代码：

<div>
<div style="width: 200px; float: left;" class="roundedBorder">
    <fieldset id="fieldsetCategory">
        <legend>Category</legend>
        <table>
            <thead>
                <tr>
                    <th>Category Name</th>    
                </tr>    
            </thead>
            <tbody data-bind="foreach: categories">
                <tr data-bind="click: onCategoryClick.bind($data, $parent)">
                    <td data-bind="text: name"></td>
                </tr>
            </tbody>
        </table>
    </fieldset>
</div>
<div id="divCategoryData" style="width: 200px; float: right;" class="roundedBorder">
    <fieldset id="fieldsetCategoryInfo">
        <legend>Category Information</legend>
        <table>
            <tr>
                <td>Catgory Name:</td>
                <td>
                    <strong data-bind="text: name"></strong>
                </td>
            </tr>
            <tr>
                <td>Catgory Address:</td>
                <td>
                    <strong data-bind="text: address"></strong>
                </td>
            </tr>
        </table>
    </fieldset>
</div>


<script type="text/javascript">
    function CategoryModel(name, address) {
        var self = this;
        this.name = name;
        this.address = address;
    }

    function CategoryViewModel() {
        var self = this;
        self.categories = [
            new CategoryModel("Category 1", "Delhi"),
            new CategoryModel("Category 2", "Gurgaon"),
            new CategoryModel("Category 3", "Noida"),
            new CategoryModel("Category 4", "Ghaziabad")
        ];
    }

    self.onCategoryClick = function () {
        var model = this;
        alert(model.name + " " + model.address);
        ko.applyBindings(model, "divCategoryData");

    };

    $(document).ready(function() {
        ko.applyBindings(new CategoryViewModel());
        ko.applyBindings(new CategoryModel(), "divCategoryData");
    });

</script>

我想将 CategoryModel 对象绑定到“divCategoryData”html 部分。如您所见，模型被传递给单击行事件。但是，我无法显示从列表中选择的类别名称和地址。
有人可以指导我“self.onCategoryClick”事件的代码片段吗？

4

1 回答 1

1

在您的情况下，我不会尝试在每次选择更改时重新绑定 div。

我建议创建一个包含所选类别的 selectedCategory 可观察对象。

function CategoryModel(name, address) {
    var self = this;
    this.name = name;
    this.address = address;
}

function CategoryViewModel() {
    var self = this;
    self.categories = [
    new CategoryModel("Category 1", "Delhi"),
    new CategoryModel("Category 2", "Gurgaon"),
    new CategoryModel("Category 3", "Noida"),
    new CategoryModel("Category 4", "Ghaziabad")];

    self.selectedCategory = ko.observable();

    self.onCategoryClick = function (model) {
        //alert(model.name + " " + model.address);
        self.selectedCategory(model);

    };
}

ko.applyBindings(new CategoryViewModel());

看到这个小提琴演示

我希望它有所帮助。

于 2013-10-14T12:05:56.920 回答