2

コンテナーレス構文を使用して Knockoutjs テンプレートを呼び出す場合、IE8 は foreach 制御フロー内のテンプレートを適切にレンダリングしません。初期化は正常に機能しitemsますが、変更された場合、レンダリングは正しくありません。これは IE8 でのみ発生します。9 は問題ありません。7 でも動作します。

モデル

function BrowseModel() {
    var self = this;
    self.items = ko.observableArray();
    self.itemsStep = ko.observable(1);
    self.repopulate = function() {
        self.itemsStep(self.itemsStep() + 3);
        return false;
    };
    ko.computed(function() {
        var arr = [];
        for (var i = self.itemsStep(); i <= self.itemsStep() + 5; i++) {
            arr.push(i);
        }
        self.items(arr);
    }, self);
}

ko.applyBindings(new BrowseModel());

意見

<a href="javascript:;" data-bind="click: repopulate">Change items</a>
<ul>
    <!-- ko foreach: items -->                                                 
        <!-- ko template: { name: 'product_template'} -->
        <!-- /ko -->  
   <!-- /ko -->
</ul>

<ul>
    <li data-bind="template: { foreach: items, name: 'product_template' }"></li>
</ul>


<br />
<div data-bind="text: ko.toJSON($data)"></div>


<script type="text/html" id="product_template">
    <li data-bind="text: $data"></li>
</script>

IE 8 の動作パターンが見つかりませんでした。レンダリングは一種のランダムです。

コンテナーレス制御フロー構文を使用しない以外に、これを修正するにはどうすればよいですか?

フィドル

LE: 問題がある場合は、F12 開発者ツールを使用しています

4

2 に答える 2

5

jsFiddle を修正

&nbsp;内側のバインディングにa を追加したところ、問題が解決したようです。IE8 のノックアウトは、コンテンツを持たないネストされたコンテナレス コントロール バインディングを好まないようです。

私の経験では、コンテナレス コントロール バインディングは IE6-IE8 で不安定な動作を示す傾向があることに注意してください。これらのブラウザーをサポートする場合は、コンテナーレス コントロール バインディングを避けることをお勧めします。コンテナレス コントロール バインディングを含むほぼすべてのシナリオは、データ バインド式を含む HTML 要素を使用する代替案に書き直すことができます。

于 2012-08-31T21:12:41.660 に答える
0

私はIE8でこの構造に恵まれました。元の投稿に示されているように、コンテナーのないものを分離しようとすると、IE8 が不平を言いました。以下に示す構文を使用すると、正常に動作します。

<table id="mam-listing-table" border="0" width="100%" cellpadding="2" cellspacing="0">
    <thead>
        <tr valign="top">
            <th class="ms-vh" nowrap="">Team</th>
            <th class="ms-vh" nowrap="" colspan="99">Note Count</th>
        </tr>
        <tr valign="top">
            <th class="ms-vh" nowrap=""></th>

            <!-- ko foreach: Months -->
                <th class="ms-vh" nowrap="" data-bind="text: $data "></th>
            <!-- /ko -->

            <th class="ms-vh" nowrap="" data-bind="text: 'TOTAL as of ' + moment().format('MM/DD/YY')"></th>
        </tr>
    </thead>

    <tbody>

        <!-- ko template: { name: 'Site', foreach: Sites} -->
        <!-- /ko -->  
        <!-- ko template: { name: 'Total'} -->
        <!-- /ko -->  

    </tbody>

</table>
于 2014-10-23T18:48:39.997 に答える