将 2 个视图模型绑定到 2 个不同的 div 对 knockoutjs 中的一个 div 不起作用答案

【问题标题】：Bind 2 viewmodels to 2 different divs does not work for one div in knockoutjs将 2 个视图模型绑定到 2 个不同的 div 对 knockoutjs 中的一个 div 不起作用
【发布时间】：2013-03-29 09:51:44
【问题描述】：

当我评价 PersonViewModel 及其“数据”div 时，LinkViewModel 数据绑定工作。但是当两个 ViewModel 都被主动使用时，绑定到 LinkViewModel 的超链接没有显示为链接，这是为什么呢？

<!DOCTYPE html>
<html lang="en">
<head>
    <title>KnockoutJS samples</title>

    <script src="~/Scripts/knockout-2.2.1.debug.js"></script>
    <script src="~/Scripts/jquery-1.9.1.js"></script>
    <script src="~/Scripts/knockout.mapping-latest.js"></script>
    <script src="~/Scripts/knockout.validation.js"></script>
    <script type="text/javascript">

        $(function () {
            var PersonViewModel = function ()
            {
                var self = this;
                this.firstName = ko.observable('Lisa');
                this.lastName = ko.observable('T');
                this.isCustomer = ko.observable(true);
                this.employeeTypeA = ko.observable(true);
                this.employeeTypeB = ko.observable(false);
                this.employeeType = ko.computed(function ()
                {
                    if (self.employeeTypeA())
                        return 'TypeA';
                    else if (self.employeeTypeB())
                        return 'TypeB';
                    else
                        return '';
                }, this);
            };

            var LinkViewModel = function ()
            {
                this.title = ko.observable('Hello World');
                this.href = ko.observable('http://www.xxx.com');
            };

            var personViewModel = new PersonViewModel();
            ko.applyBindings(personViewModel, $('data')[0]);

            var linkViewModel = new LinkViewModel();
            ko.applyBindings(linkViewModel, $('data1')[0]);

        });
    </script>
</head>
<body>
    <div id="data">
        <span data-bind="text: firstName"></span>
        <span data-bind="text: lastName"></span>
        <input type="checkbox" data-bind="checked: isCustomer" title="Is a customer" />
        <input name="x" type="radio" value="TypeA" data-bind="checked: employeeType" title="Employee type A" />
        <input name="x" type="radio" value="TypeB" data-bind="checked: employeeType" title="Employee type B" />
    </div>
    <div id="data1">
        <a data-bind="attr: { href: href, title: title }">this is a link</a>
    </div>
</body>
</html>

【问题讨论】：

标签： knockout.js knockout-2.0

【解决方案1】：

您的 jquery 选择器错误。当你想search for an id你需要使用#：

var personViewModel = new PersonViewModel();
ko.applyBindings(personViewModel, $('#data')[0]);

还有

var linkViewModel = new LinkViewModel();
ko.applyBindings(linkViewModel, $('#data1')[0]);

【讨论】：

啊是的...我完全忘记了他们该死的午夜编码...再次感谢 nemesv ;-)