Question

我正在使用KO将一个对象绑定到特定div。以下是我的代码。

 <div>
    <label>Name</label>
    <input type="text" data-bind="value: name" />
</div>
<div id="testDiv" style="border:solid red">
    <label for="txtProductName">Product Name</label>
    <input type="text" id="txtProductName" name="txtProductName" data-bind="value: ProductName"/>
</div>

@section scripts{
    <script src="~/Scripts/knockout-2.1.0.js"></script>
    <script type="text/javascript">
        $(function () {

            var ViewModel = function () {
                var self = this;
                self.name = ko.observable("Hemant");
                self.age = ko.observable(50);
                self.address = ko.observable("Pune");                
            };

            var vm = new ViewModel();
            ko.applyBindings(vm);

            var product = {
                ProductName: ko.observable(),
                Price: ko.observable(),
                Desc: ko.observable()
            };           
           ko.applyBindings(product, $('#testDiv')[0]);
        });
    </script>
}

'name'字段已正确附加。但我无法绑定'ProductName'。获取以下错误消息

消息：TypeError：'ProductName'未定义;

你能帮帮忙吗？问候，与Hemant

Answer 1

您的初始applyBindings正在将vm应用于整个页面，因此调用第二个applyBindings不会正确地将产品绑定到您的div。所以淘汰赛试图将产品名称从vm上移除。

您可以将vm绑定到上面的div，或者将Product设为vm的属性

var ViewModel = function () {
    var self = this;
    self.name = ko.observable("Hemant");
    self.age = ko.observable(50);
    self.address = ko.observable("Pune");
    self.Product = {
        ProductName: ko.observable(),
        Price: ko.observable(),
        Desc: ko.observable()
        }
    };

然后你可以使用with binding来定位你的div产品：

<div id="testDiv" style="border:solid red" data-bind="with: Product">
    <label for="txtProductName">Product Name</label>
    <input type="text" id="txtProductName" name="txtProductName" data-bind="value: ProductName"/>
</div>

还有第三种方法，您可以将特定的视图模型绑定到页面的不同部分：

ko.bindingHandlers.stopBinding = {
    init: function ()
    {
        return { controlsDescendantBindings: true };
    }
};

ko.virtualElements.allowedBindings.stopBinding = true;

然后使用：

<!-- ko stopBinding: true -->
<!-- /ko -->

在您的网页中

html评论以停止绑定。

KO绑定问题

1 个答案: