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 的宽度。（我试过不使用counter，直接引用viewModel.Feeds.length，但是好像observableArray中没有length）

我遇到的问题是，在 Feeds 中的元素数量增加后，由于服务器的更新，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：“......并且每当 firstName 或 lastName 更改时它们都会更新（您的评估器函数将在其任何依赖项发生更改时调用一次，并且您返回的任何值都将被传递到观察者，例如 UI 元素或其他计算的 observables）。”

每当 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 回答