0

我遇到了与观察动态创建的项目的属性变化有关的奇怪行为。

场景： 我有一个页面，我的用户可以在其中创建联系人。他们创建的联系人数量各不相同（在一些条件下）。

我当前的解决方案： 我创建了一个联系人模板。每次用户点击添加按钮时，我都会使用 Observable API 添加一个新的联系人对象。现在的问题是，当我尝试删除联系人时，联系人已从底层数组中删除，但不会从 UI 中删除。此外，我收到一个异常，说：“无法读取未定义的属性'_cId'”。

<div id="page"></div>

<script id="PageTemplate" type="text/x-jsrender">
    <!-- More elements here -->

    <button class="add-contact-btn">Add</button>    
    <div id="Contacts" data-link="{for Contacts tmpl='ContactTemplate'}"></div>

    <!-- More elements here -->
</script>

<script id="ContactTemplate" type="text/x-jsrender">
    <div>
        <label for="FirstName">First Name</label>
        <input type="text" data-link="FirstName" />

        <br />

        <label for="LastName">Last Name</label>
        <input type="text" data-link="LastName" /> 

        <br />
        <br />

        <a class="delete-contact" href="javascript:void(0)">Delete</a>
    </div>
</script>

这是我的 JavaScript 代码：

var PageContext = new ContactPage();

$(function () {
    PageContext.init();
});

function ContactPage() {
    var addContactBtn = 'button.add-contact-btn';
    var deleteContactLink = 'a.delete-contact';

    this.UnsavedChanges = false;
    this.Contacts = [];

    var contactHandler = function (event, eventArgs) {
        var dataContext = event.data;
        $.observable(dataContext).setProperty('UnsavedChanges', true);
    };

    this.init = function () {
        var that = this;

        $.templates({
            PageTemplate: '#PageTemplate',
            ContactTemplate: '#ContactTemplate'
        });

        $.link.PageTemplate('#page', this)
            .on('click', addContactBtn, null, function (event) {
                $.observable(that.Contacts).insert({
                    FirstName: "",
                    LastName: ""
                });
            })
            .on('click', deleteContactLink, null, function () {
                var index = $.view(this).index;
                $.observable(that.Contacts).remove(index);
            });

        $([this.Contacts]).on('arrayChange', null, this, function (event, eventArgs) {
            if (eventArgs.change === 'insert') {
                // Exception is thrown: "Cannot read property '_cId' of undefined" when I click on Delete
                $(eventArgs.items).on('propertyChange', null, event.data, contactHandler);

                // however if i run it like this, then no exceptions are thrown
                //$(eventArgs.items).on('propertyChange', contactHandler);
            }
        });
    };
}

我创建了一个 JsFiddle 来演示异常，我希望有人可以指导我如何解决它。

http://jsfiddle.net/parthsha/dLo33ch9/3/

4

1 回答 1

0

是的 - 你是对的，这里需要一个空检查：

found = (data = events[l].data) && data.cb._cId === evData._cId;

我将在下一次更新中将其更改为：

found = (data = events[l].data) && data.cb && data.cb._cId === evData._cId;
于 2015-07-09T19:03:59.337 回答