Question

我遇到了与观察动态创建的项目的属性更改相关的奇怪行为。

情境： 我有一个用户创建联系人的页面。他们创建的联系人数量有所不同（在几个条件下）。

我目前的解决方案： 我创建了一个联系人模板。每次用户单击“添加”按钮时，我都会使用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/

Answer 1

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

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

我会在下次更新时将其更改为：

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

JsView无法读取未定义的属性'_cId'

1 个答案: