2

私は基本的に ASP.net ベースのフレームワークである DotNetNuke7 のコンテキスト内で作業しており、KO についてはまったくの初心者です。

私は 1 つの ko ビューモデルを持ち、その中に 2 つの foreach ループを持たせようとしています。各ループは、次のようにビュー モデル定義の一部である配列をレンダリングします。

    //We build two arrays: one for the users that are in the group 
    //and one for the users that are not in the group 
    var nonGroupMembers = $.map(initialData.NonGroupUsers, function (item) { return new   Member(item); });
    var groupMembers = $.map(initialData.GroupUsers, function (item) { return new Member(item); });

    //The members we start with before we added new members 
    self.SearchTerm = ko.observable('');
    self.CircleMembers = ko.observableArray(groupMembers);
    self.NonCircleMembers = ko.observableArray(nonGroupMembers);

HTMLコンテキスト（またはaspユーザーコントロール）に次のコードを配置しました 

<div id="socialDirectory" class="dnnForm dnnMemberDirectory">
    <ul id="mdMemberList" class="mdMemberList dnnClear" style="display:none" 
         data-bind="foreach: { data: NonCircleMembers, afterRender: handleAfterRender }, 
                        css: { mdMemberListVisible : Visible }, visible: HasMembers()">
        <li class="memberItem">

            <div data-bind="visible: $parent.isEven($data)">
                <%=MemberItemTemplate %>
            </div>            
            <div data-bind="visible: !$parent.isEven($data)">
                <%=MemberAlternateItemTemplate %>
            </div>            

        </li>
    </ul>  
</div>

<div class="circleDirectory"  id="circleDirectory"  >

    <ul id="cdMembersList" data-bind =" foreach: {data: CircleMembers, afterRender: handleAfterRender}">
            <li class="memberItem"> 
               <div class="mdMemberDetails">
                    <a href="" class="mdMemberImg" data-bind="attr: { title: DisplayName, href: ProfileUrl }">
                        <span><img data-bind="attr: { src: getProfilePicture(50,50), title: DisplayName }" /></span>
                    </a>
                    <ul class="MdMemberInfo">
                        <li class="mdDisplayName" >
                                <a href="" title="" class="mdMemberTitle" 
                                    data-bind="attr: { title: DisplayName, href: ProfileUrl }, 
                                    event: { mouseover: $parent.showPopUp }">
                                <span data-bind="text: DisplayName"></span>
                            </a>
                        </li>  
                        <li class="mdTitle"><p><span data-bind="text: Title"></span></p></li>
                        <li class="mdLocation"><p><span data-bind="text: Location()"></span></p></li>
                    </ul>
                </div>
            </li>
    </ul>
</div>

foreach バインディング ループを含む各 DIV は、他がなくても完全に機能します。たとえば、下の div (id= cdMembersList) は問題なく動作しますが、バインディング マークアップを使用して上の div を追加すると、動作が停止します。万力節でも同じことが起こります。

なぜそれが起こるのか、誰にも手がかりがありますか？1 つのビュー モデルに 2 つのループを含めることはできませんか?

この謎の解明を楽しみにしています。

ありがとう、デビッド

4

1 に答える 1

1

わかりました、私はそれを言うのは嫌ですが、答えはいつものように非常に簡単です。ビューモデルにcssのVisibleプロパティを 追加しませんでした：{mdMemberListVisible：Visible}

新しいスクリプトファイルを作成したとき、このプロパティをスキップしました。いくつかのレッスン：

  1. 1つのビューモデルで複数のループを実行できます。
  2. ビューモデルですべてのプロパティが定義されていることを常に確認してください。

また、問題について明確に考え、行動を再検討することができるので、このボードに質問を作成するのに役立つようです。質問を投稿する前にこの問題を追跡するのに2時間費やしましたが、投稿してから15分で解決しました。

于 2012-12-16T19:49:27.797 に答える