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