1

目标

当我使用 KnockoutJS 将它添加到另一个列表时突出显示项目。

问题

我不知道怎么做，是的——我已经在 Google 和 Stack 上搜索过，但没有成功；没有“添加”。

我的 HTML 标记：

<div class="tooltip-quantity">
    <p class="float-left">Quantity:</p>
    <form data-bind="submit: Summary.addToSummary">
        <input class="quantity float-left" name="productQuantity" 
               maxlength="2" 
               type="text" 
               data-bind="value: ProductLayout.itemQuantity, 
                                 valueUpdate: 'afterkeydown'" />
        <span class="float-left">/@(Model["MeasureName"])(s)</span>
        <button class="btn btn-add btn-mini float-right" 
                data-bind="enable: ProductLayout.itemQuantityValid">
            Add
        </button>
        <input type="hidden" name="productId" value="@Model["ProductId"]" />
        <input type="hidden" name="productName" value="@Model["ProductName"]" />
        <input type="hidden" name="productMeasure" value="@Model["MeasureName"]" />
    </form>
</div>

我的SummaryViewModel，在 JS 上：

function SummaryViewModel() {
    var self = this;

    self.products = ko.observableArray();

    self.addToSummary = function (formElement) {
        var $productId = $(formElement).children("[name=productId]").val();

        var match = $(".summary")
                    .find("li[data-product-id=" + $productId + "]").length;

        if (!match) {
            var $productName = $(formElement)
                                  .children("[name=productName]").val(),
                $productMeasure = $(formElement)
                                  .children("[name=productMeasure]").val(),
                $productQuantity = $(formElement)
                                  .children("[name=productQuantity]").val();

            self.products.push
               (new Product
                   ($productId, $productName, $productMeasure, $productQuantity));

            $.ajax({
                type: "POST",
                url: "/ProductsSummary/Add",
                data: { productId: $productId, productQuantity: $productQuantity }
            });
        }
    }
};

观察： addToSummary函数执行当我将某些内容添加到列表时发生的事情。

4

1 回答 1

3

这是一个工作示例，每次将项目添加到列表时，它都会被动画化：这是一个 jsfiddle

html:

<script type="text/html" id="tmpl">
  <div>
    <span data-bind="text: $data"> </span>
    <span>  other stuff not bound </span>
  </div>
</script>

<div data-bind="template: {name: 'tmpl',foreach: Data, afterRender: $root.Animate}">
</div>

<span data-bind="text: Data().length"></span>
<button data-bind="click: AddAnItemAndAnimate">AddAnItemAndAnimate</button>

Javascript：

function ViewModel() {
  var self= this;
  self.Data = ko.observableArray([]);

  self.AddAnItemAndAnimate = function () {
    //just after the push, when the elements will be visible, the function
    //Animate will be call (it is linked to the afterRender of the tempalte)
    self.Data.push('added');
  };

  self.Animate = function(elements, index, data){
    // elements contains the html representing the new item
    $(elements).filter('div').fadeOut().fadeIn();
  };
}
var vm = new ViewModel();

ko.applyBindings(vm);
于 2013-07-01T20:50:50.790 回答