0

ノックアウト生成コンテンツが異なるページがあります。右側のメニューで選択した行に応じて、ページの中央に新しいデータをロードする必要があるデータを含む右側のメニューがあります。

そのため、ページの途中でコンテンツを取得できます。バックエンドから現在のコンテンツをロードして表示します。しかし、右側のパネルでアイテムを選択すると... ページの途中のデータを再取得してページを更新したいと考えています。ただし、これは私にとっての停止点です。コンテンツのフェッチは名前空間で行われ、グローバル変数は許可されていないため、現在のビューモデルを再利用できません (または、少なくとも方法がわかりません)。したがって、ページが読み込まれたときに同じタイプのビューモデルに既に適用されているため、バインディングを適用できない新しいビューモデルを作成しています。

これは私のJSコードです:

Function.registerNamespace('Domain.Discussion');

$(document).ready(function () {
    var repliesViewModel = Domain.Discussion.RepliesView.ReplyPage;

    ko.applyBindings(repliesViewModel, document.getElementById('discussion'));
});

Domain.Discussion.RepliesView = Domain.Discussion.RepliesView || {
    ReplyPage: (function () {
        function Reply(data) {
            var self = this;
            self.ParentItemId = data.ParentItemID;
            self.Body = data.Body;
            self.Created = data.Created;
        }
        var onGetRepliesSuccess = function (replies) {
            var buffer;
            buffer = $.map(replies.RepliesResult, function (item) { return new Reply(item); });
            viewModelReplies.replies(buffer);
        };
        var onGetRepliesError = function (sender, args) {
            alert(args.message);
        };
        var viewModelReplies = {
            replies: ko.observableArray([]),
            loadReplies: function (parentItemId, listId) {
                if (parentItemId !== null && listId !== null) {
                    console.log("ParentItemId: " + parentItemId + " -- ListId: " + listId);
                    alert("Domain.Discussion.RepliesView");

                    $.ajax({
                        url: absolutePath + "api/Replies/" + listId + "/" + parentItemId,
                        headers: { "Accept": "application/json; odata=verbose" },
                        success: onGetRepliesSuccess,
                        error: onGetRepliesError
                    })
                }
            },
        };

        viewModelReplies.loadReplies(1, '6a5ed4ad-5a7c-428f-947e-b8aa2de54489');

        return viewModelReplies;
    }())
};

// The method loaded by the row-click in the right panel.
Domain.Discussion.LoadDiscussionReplies2 = function (discussionListId, currentItem) {
    try {
        if (currentItem.ListId !== "" && currentItem.Id !== "") {
            // Call the current viewModel and tell it to loadReplies
            // This doesn't work since global variables are, of course, not allowed
            repliesViewModel.loadReplies(currentItem.Id, currentItem.ListId);
        }
    }
    catch (e) {
        alert(e);
    }
}

これは私のHTMLコードです:

<!-- page discussion -->
<div data-role="page" id="discussion">
    <!-- Content -->
    <div data-role="content">
        <!-- ladda replies -->
        <div id="replies">
            <!-- ko foreach: replies -->
            <div class="message message-first">
                <div class="message-header">
                    <div class="message-header-user">
                        <h1>Persons Name</h1>
                        <h2>Subtitle</h2>
                    </div>
                    <div class="message-header-date" data-bind="text: Created"></div>
                </div>
                <div class="message-content">
                    <span data-bind="text: Body"></span>
                    <hr />
                </div>
            </div>
            <!-- /ko -->
        </div>
    </div>
    <!-- panel -->
    <!-- Grupper -->
    <div id="nav-panel-discussion-groups" data-role="panel" data-theme="a" data-position="right" data-display="overlay">
                <!-- ko foreach: discussions -->
                <ul class="nav-search" data-role="listview" data-theme="a" data-iconpos="left" data-inset="true">
                    <li data-role="list-divider" data-swatch="a" data-theme="a" data-form="ui-bar-a">
                        <div data-type='horizontal'>
                            <label data-bind="text: Title"></label>
                            <a data-bind="attr: { eventId: Id }"  eventId="" name='newThread' data-role="button" data-icon='plus' data-inline="true" data-mini="true" data-theme="a" data-iconpos='notext' id="A4">New</a>
                        </div>
                    </li> 

                    <!-- ko foreach: Threads -->
                    <li data-mini="true" data-icon="false" data-bind="">
                        <a href="#discussion" data-bind="text: Title, click: Domain.Discussion.LoadDiscussionReplies2.bind($root.Id, Id)" data-transition="slide"></a>
                    </li>
                    <!--  /ko -->
                </ul>
                <!-- /ko -->
    </div>
    <!-- /panel -->
</div>

私の質問は次のとおりです。データを再取得して、ページの読み込み時に開始されたビューモデルを再利用するにはどうすればよいですか。私は今完全に立ち往生しています。

4

1 に答える 1

1

現在のプロジェクトにも同様の要件があります。同じページにいくつかのビューモデルがあり、1 つのビューモデルのアクションが他の 1 つ (または複数) の状態に影響を与える可能性があります。EventEmitterすべてのビューモデルが共有するバスを使用して解決しました。ビューモデルの 1 つが新しいデータを取得すると、このイベントをリッスンする他のビューモデルにイベントとして送信します。このようなもの：

// Data fetched
eventBus.emit('mynamespace:data', [data]);

そして、他のビューモデルでは:

// Respond to data
eventBus.on('mynamespace:data', function(data) {
    // Process data and update viewmodel state
}

したがって、唯一の共通点はイベント バスです。彼らはお互いについて他の知識を持っていません。

于 2013-04-25T06:52:35.647 に答える