javascript - 使用 knockoutjs 操作 View 模型

Question

我如何使用 KnockoutJS 创建函数，我可以调用它来对 View 模型进行一些操作？

型号:

public class ViewModel
{
   public int User { get; set; }
   public string Address { get; set; }
   public string ZipCode { get; set; }
   public List<Product> Products { get; set; }

}

public class Product
{
   public int Id { get; set; }
   public string Name { get; set; } 
}

Javascript:

<script type="text/javascript">
        var Product = function (Id, Name) {
            self = this;
            self.Id = Id;
            self.Name = Name;
        }

        function Add() {
            viewModel.products.push(new Product(2, "bread"));
        }

        function Remove(product) {
            viewModel.products.remove(product);
        }

        var viewModel = ko.mapping.fromJS(@Html.Raw(Json.Encode(Model)));
        viewModel.products = ko.observableArray();

        ko.applyBindings(viewModel);

        Add();
        console.log(viewModel.products().length);

        var t = new Product(2, "bread");

        Remove(t);
        console.log(viewModel.products().length);
</script>

这里的添加是这样的，但是 function Remove(product) 不会从 array 中删除产品。我没有收到错误，console 仅打印出 1(在两个 viewModel.products().length 调用中)。

那么如何为 KnockoutJS 创建适当的函数以便能够在页面的任何位置调用它们？

Answer 1

我在你的代码中看不到任何明显的东西，它不像是在你的模型中返回的对象，你的删除实际上是有效的，但剩下的对象是从模型中返回的对象？

我更喜欢在从模型中读回对象时映射对象，以避免像这样创建匿名对象:

var mapping = {
    'Products': {
        create: function(options) {
            return new Product(options.data.Id, options.data.Name);
        }
    }
}

这确保您的产品是实际的产品对象。

您还可以检查从您的模型返回的 json 是否如下所示:

{ "User": "a", "Address": "b", "ZipCode": "zip", "Products":[{"Id":1,"Name":"jam"}]};

这是在 jsFiddle 中运行的完整代码(检查控制台的输出):

http://jsfiddle.net/6qsjz/15/

这显示，一个从模型返回，一个添加然后删除，一个产品在集合中。

更新

您可以通过将模型更改为此来初始化收集服务器端:

public class ViewModel
{
    public ViewModel()
    {
        Products = new List<Product>();
    }
    public int User { get; set; }
    public string Address { get; set; }
    public string ZipCode { get; set; }
    public List<Product> Products { get; set; }

}

这意味着如果您采用上述方法，则无需执行 viewModel.products = ko.observableArray();。

更新

然后您可以重构它以使其具有更好的结构(更加模块化):

  var Product = function (Id, Name) {
        self = this;
        self.Id = Id;
        self.Name = Name;
    }

    var mapping = {
        'Products': {
            create: function(options) {
                return new Product(options.data.Id, options.data.Name);
            }
        }
    }   


function ProductsViewModel(data) {
    var self = this;   
    ko.mapping.fromJS(data, mapping, self);

     self.Add = function Add(product) {
         self.Products.push(product);
     }

     self.Remove = function Remove(product) {
         self.Products.remove(product);
     }
}


var data = { "User": "a", "Address": "b", "ZipCode": "zip", "Products":[{"Id":1,"Name":"jam"}]};

    var viewModel = new ProductsViewModel(data);
    ko.applyBindings(viewModel);

    // add
    var product = new Product(2, "bread");
    viewModel.Add(product);
    console.log(viewModel.Products()); 

    // remove
    viewModel.Remove(product);
    console.log(viewModel.Products());

更新的 fiddle (再次查看输出控制台):

http://jsfiddle.net/6qsjz/16/