0

次のように、2 つの異なる DIV で 2 つの FOREACH を定義します。

<div style="background-color:black; color:white; overflow:scroll; height:350px;width:300px">
<ol data-bind="foreach: price_quantity">
<li data-bind="text: quantity + ' &&& ' + price"></li>
</ol>
</div>
<div style="background-color:black; color:white; overflow:scroll; height:350px;width:300px">
<ul data-bind="foreach: papers" style="list-style-type:none">
<li>
<div data-bind="text: paperName"></div>
<ul data-bind="foreach : _colors" >
<li>
<div data-bind="style:{'background-color' : colorName}" style="height:25px;width:25px;border:1px solid white"></div>

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

$(document).ready で、以下のように 2 つの AJAX 呼び出しを行って、上記の 2 つの div に LIST を設定します。

<script type="text/javascript">
$(document).ready(function () { 

   var sku = "abcd";               
   $.ajax({
       url: "/api/values?clientSKU=" + sku,
       dataType: "json",
       asyc: true,
       type: "get",
       success: function (msg) {
                var skuandprice = $.parseJSON(msg);          
                ko.applyBindings(new ViewPriceObjectOnWeb(skuandprice));
       },
       error: function (jqXHR, textStatus, errorThrown) {
               alert(textStatus + '  ' + errorThrown);
       }
   });
   var appid= "123";     
   $.ajax({
       url: "/api/Default1?app_id=" + appid,
       dataType: "json",
       asyc: false,
       type: "get",
       success: function (msg) {
                var paperandcolors = $.parseJSON(msg);                       
                ko.applyBindings(new PaperModal(paperandcolors));
       },
       error: function (jqXHR, textStatus, errorThrown) {
                alert(textStatus + '  ' + errorThrown);
       }
   });

});

function ViewPriceObjectOnWeb(d) {
this.price_quantity = ko.observableArray(d);
}

function PaperModal(paperArr) {
this.papers = ko.observableArray(paperArr);
}

いずれかの DIV にコメントを付けて実行し、対応する呼び出しを行わないと、正常に動作します。

DIVS とその LISTS の両方を含むページを読み込むと、次のエラーが発生します。

バインディングを解析できません。メッセージ: ReferenceError: 'price_quantity' は定義されていません。バインディング値: foreach: price_quantity

なぜこれがうまくいかないのですか？どんな助けでも大歓迎です。

4

1 に答える 1

0

バインディングを複数回適用する場合は、参照するDOM要素を指定する必要があります。あなたの場合、あなたはする必要があります：

ko.applyBindings(new ViewPriceObjectOnWeb(skuandprice), document.getElementById("divQuantity"));

HTMLは次のとおりです。

<div id="divQuantity" style="background-color:black; color:white; overflow:scroll; height:350px;width:300px">
<ol data-bind="foreach: price_quantity">

2番目のバインディングでも同じです。

しかし実際には、モデルの更新からバインディングを分離することをお勧めします。これは、データをロードする前に、このバインディングコードをどこかで個別に呼び出すことを意味します。また、データをロードするときは、モデルを更新するだけで済みます。

var ViewPriceObjectOnWeb = function()
{
var self = this;
self.price_quantity = ko.observableArray(0);
};
...
var priceObject = new ViewPriceObjectOnWeb();
ko.applyBindings(priceObject, document.getElementById("divQuantity"));
...
$.ajax({
       url: "/api/values?clientSKU=" + sku,
       dataType: "json",
       asyc: true,
       type: "get",
       success: function (msg) {
                priceObject.price_quantity = $.parseJSON(msg);          
       },
       error: function (jqXHR, textStatus, errorThrown) {
               alert(textStatus + '  ' + errorThrown);
       }
   });

knockoutjsは非常にスマートなので、モデルが更新されるとすぐにDOM要素を更新します。

于 2012-11-24T05:38:18.363 に答える