Question

目标

使用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函数执行当我向列表添加内容时发生的事情。

Answer 1

以下是一个工作示例，每次将项目添加到列表时，都会对其进行动画处理：here is a 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);

使用KnockoutJS添加时突出显示

目标

问题

1 个答案: