1

つまり、「計算された値の変更に基づいてスタイルを動的に変更する」ということです。

私は、たとえば3の初期セットを持つ監視可能な配列を持っています。

配列の各要素が個別のdivに入るテンプレートを使用します（cssで左にフロートします）

<script type="text/html" id="feedsTemplate">
<div style="float:left;" data-bind="style: { width: $root.CurrentColumnWidth()+'px'}">
    <strong data-bind="text: SearchTerm"></strong>
</div>
</script>

ここに私のビューモデルがあります:

var viewModel = {
    Feeds: ko.observableArray([
        new Feed("Boston"),
        new Feed("NewYork"),
        new Feed("Chicago", ),
    ]),

    GetLatestFeeds: function () { getLatestFeeds(); },
    FeedsCounter: ko.observable(3),
    CurrentColumnWidth:  ko.computed (function()
    {           
        return ((GetCurrentPageWidth() / this.FeedsCounter));
    },this)
};

その配列の要素数に応じて、各要素が配置される div の幅を計算します。（カウンターを使わず、viewModel.Feeds.lengthを直接参照するようにしましたが、observableArrayにlengthがないようです）

私が抱えている問題は、サーバーからの更新により、フィードの要素数が増加した後、div 幅の再計算が行われないことです。ここに更新機能があります：

関数 getLatestFeeds() {

    $.getJSON('/Feed/GetUpdatedFeeds', function (data)
    {
        $.each(data, function ()
        {
            viewModel.Feeds.push(new Feed(this.SearchTerm, this.FeedItems));
            viewModel.FeedsCounter = viewModel.FeedsCounter + 1;
        });
    });
}

私が理解している限り、www.knockoutjs.com から: UI要素やその他の計算されたオブザーバブルなどのオブザーバーに）。」

FeedsCounter が変更されるたびに、計算された var も更新され、div の css にバインドされているため、幅も変更する必要があります..それは起こりません。

ヘルプ/提案/ポインタをいただければ幸いです。

ありがとう！

4

2 に答える 2

2

observable から値を取得する場合()は、関数であるため使用する必要があります。設定値についても同様です。

var viewModel = {
    Feeds: ko.observableArray([
        new Feed("Boston"),
        new Feed("NewYork"),
        new Feed("Chicago", ),
    ]),

    GetLatestFeeds: function () { getLatestFeeds(); },
    FeedsCounter: ko.observable(3),
    CurrentColumnWidth:  ko.computed (function()
    {           
        return ((GetCurrentPageWidth() / this.FeedsCounter()));
    },this)
};

function getLatestFeeds() {

    $.getJSON('/Feed/GetUpdatedFeeds', function (data)
    {
        $.each(data, function ()
        {
            viewModel.Feeds.push(new Feed(this.SearchTerm, this.FeedItems));
            viewModel.FeedsCounter(viewModel.FeedsCounter() + 1);
        });
    });
}
于 2012-11-26T13:58:40.740 に答える
0 
viewModel.FeedsCounter = viewModel.FeedsCounter + 1;

する必要があります

viewModel.FeedsCounter(viewModel.FeedsCounter() + 1);

注: FeedsCounter 変数はobservableへの参照です。これは基本的に関数であり、int への参照ではありません。

http://knockoutjs.com/documentation/observables.htmlを参照してください

于 2012-11-26T13:55:57.477 に答える