2

次のようにテーブルを作成しようとしていますが、「エラー: 一致する終了コメント タグが見つかりません: ko if: cellIsStartOfRow」が表示されます。

私はそれを間違っていますか？

<table>
    <tbody data-bind="foreach: MyDocs">
        <!-- ko if: cellIsStartOfRow --> 
            <tr class="docsRow">
        <!-- /ko -->  
                <td>

                      <!-- There is more databinding in here - a div containing a textarea and also containing a hyperlink surrounding an image.  I think the contents are irrelevant to my question, but I can post if someone disagrees.-->  

                </td> 

        <!-- ko if: cellIsEndOfRow --> 
            </ tr>
        <!-- /ko --> 

   </tbody>
</table>

ビューモデルの JS は次のとおりです。上記の td の内容は多少簡略化されています。私のページの他のjsから関数を呼び出します。ビューモデル自体は、ページで宣言されている変数に割り当てられます。

Type.registerNamespace("HpDocs");


HpDocs.DocsVM = function (data) {
    ko.mapping.fromJS(data, {}, this);


    // add additional properties to each document for presentation
    // purposes
    for (i = 0; i < this.MyDocs().length; i++) {
        var myDoc = this.MyDocs()[i];
        myDoc.docObjectId = "docObject" + myDoc.Id();
        myDoc.textareaId = "ucHpDocs" + "_txta";

        if (i % 5 == 0) {
            myDoc.cellIsStartOfRow = true;
            myDoc.cellIsEndOfRow = false;
        } else if (i % 5 == 5) {
            myDoc.cellIsStartOfRow = false;
            myDoc.cellIsEndOfRow = true;
        } else {
            myDoc.cellIsStartOfRow = false;
            myDoc.cellIsEndOfRow = false;
        }
    }
};

HpDocs.DocsVM.prototype = {
//    cellIsStartOfRow: function(){
//        return true;
//    },
    getDocs: function (filter) {
        var self = this;
        $.ajax({
            url: getMethodUrl("GetDocs"),
            data: "{'filter': " + filter + "}",
            success: function (response) {
                ko.mapping.fromJS(response.d, {}, self.MyDocs);
            }
        })
    }
};

HpDocs.dbGetDocs = function (filter) {
    $.ajax({
        url: getMethodUrl("DbGetDocs"),
        data: "{'filter': " + filter + "}",
        success: function (response) {

            myDocsViewModel = new HpDocs.DocsVM({
                MyDocs: ko.mapping.fromJS(response.d)
            });

            var bindingScope = $("#divMyDocs")[0];
            ko.applyBindings(myDocsViewModel, bindingScope);

            $(".DocsUpdateProgress").addClass("invisible");
        }
    })
};


HpDocs.getPreferredTab = function () {
    var tabPref = $("[id$='hidDocTabPreference']").html();
    return tabPref;
};

HpDocs.showProgress = function () {
    $(".DocsUpdateProgress").removeClass("invisible");
};
HpDocs.hideProgress = function () {
    $(".DocsUpdateProgress").addClass("invisible");
};



//register the class
HpDocs.DocsVM.registerClass('HpDocs.DocsVM', null, Sys.IDisposable);


// notify ajax that the script is now loaded.
if (typeof (Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

答え

モデルをリファクタリングしました。MyDocs にオブジェクトのリストを含める代わりに、Rows というプロパティを含めるようにしました。このプロパティには、Documents というプロパティが含まれています。次に、次のことを行うことができます。

<table id="tblMyDocs">
                <tbody data-bind="foreach:  MyDocs.Rows">

                        <tr data-bind="foreach: Documents">
                                  <td>
                                          <!-- in here i present each document by databinding to the Model's properties -->
                                  <td>
                        </tr>
                 </tbody>
</table>

もちろん、モデルは行で編成されているため、ビューモデルははるかに簡単です。

HpDocs.DocsVM = function (data) {
    ko.mapping.fromJS(data, {}, this);
};

HpDocs.DocsVM.prototype = {
    getDocs: function (filter) {
        var self = this;
        $.ajax({
            url: getMethodUrl("GetDocs"),
            data: "{'filter': " + filter + "}",
            success: function (response) {
                ko.mapping.fromJS(response.d, {}, self.MyDocs);
            }
        })
    }
};

HpDocs.dbGetDocs = function (filter) {
    $.ajax({
        url: getMethodUrl("DbGetDocs"),
        data: "{'filter': " + filter + "}",
        success: function (response) {

            myDocsViewModel = new HpDocs.DocsVM({
                MyDocs: ko.mapping.fromJS(response.d)
            });

            var bindingScope = $("#divMyDocs")[0];
            ko.applyBindings(myDocsViewModel, bindingScope);

            HpDocs.hideProgress();
        }
    })
};
4

2 に答える 2

2

以下のように js に書式設定ロジックを追加する代わりに:

// add additional properties to each document for presentation
    // purposes
    for (i = 0; i < this.MyDocs().length; i++) {
        var myDoc = this.MyDocs()[i];
        myDoc.docObjectId = "docObject" + myDoc.Id();
        myDoc.textareaId = "ucHpDocs" + "_txta";

        if (i % 5 == 0) {
            myDoc.cellIsStartOfRow = true;
            myDoc.cellIsEndOfRow = false;
        } else if (i % 5 == 5) {
            myDoc.cellIsStartOfRow = false;
            myDoc.cellIsEndOfRow = true;
        } else {
            myDoc.cellIsStartOfRow = false;
            myDoc.cellIsEndOfRow = false;
        }

データ行用に別のビューモデルを作成することをお勧めします。json データを提供しなかったため、100% 解決できませんでしたが、これで正しい方向に進むことを願っています。これが私が取り組んでいたjsfiddleです：http://jsfiddle.net/JasonMore/GcSAn/2/

意見

<table>
    <tbody data-bind="foreach: someArray">
            <tr class="docsRow" data-bind="foreach:docRows">
                <td>
                    <div data-bind="attr:  {id: objectId}">
                       <a data-bind="attr: {href: someUrl}">
                          <img data-bind="attr: {src: IconPath, alt: Tooltip}"/>
                       </a> 
                       <br/>
                       <textarea runat="server" readonly="readonly" data-bind="html: DisplayName"></textarea>

                    </div>
                </td> 
            </ tr>

   </tbody>
</table>​​​​​

Javascript

HpDocs.RowVM = function(data) {
    ko.mapping.fromJS(data, {}, this);

}

HpDocs.DocsVM = function(data) {
    ko.mapping.fromJS(data, {}, this);

    this.docRows = ko.observableArray();

    // add additional properties to each document for presentation
    // purposes
    for (i = 0; i < this.MyDocs().length; i++) {
        var myDoc = this.MyDocs()[i];
        myDoc.docObjectId = "docObject" + myDoc.Id();
        myDoc.textareaId = "ucHpDocs" + "_txta";

        if (i % 5 == 0) {
            // create new RowVM and start adding DocsVM to it
        } else if (i % 5 == 5) {
            // push the RowVM to this.docRows populated with cells
        } else {
            // add the myDoc to the current RowVM you are working with
        }
    }
};

更新 - 適切な mvvm の作成方法に関するノックアウト トークへのリンク

スライドと例: http://bit.ly/FamilyFeudSlides

コード: https://github.com/jasonmore/familyfeud

于 2012-04-18T16:46:32.287 に答える
2

問題はここにありました：

<!-- ko if: cellIsStartOfRow --> 
   <tr class="docsRow">
<!-- /ko -->

if 内に開始タグと終了タグの両方が必要なので、..

<!-- ko if: cellIsStartOfRow --> 
   <tr class="docsRow">
   ... 
   </tr>
<!-- /ko -->
于 2014-04-30T15:37:03.217 に答える