Question

我有一个保存产品和类别的数据库（每个类别属于一个产品，每个产品都有很多类别）

要接受输入，我有一个HTML表单，用于创建使用knockoutjs填充的新记录

＆＃13;

var productList = [{
  id: 1,
  name: 'product1',
  categories: [{
    id: 1,
    name: 'category1'
  }, {
    id: 2,
    name: 'category2'
  }]
}, {
  id: 2,
  name: 'product2',
  categories: [{
    id: 3,
    name: 'category3'
  }, {
    id: 4,
    name: 'category4'
  }]
},{
  id: 3,
  name: 'product3',
  categories: [{
    id: 5,
    name: 'category5'
  }, {
    id: 6,
    name: 'category6'
  }]
}]

function Product(productList) {
  var self = this

  self.productList = productList
  self.selectedProduct = ko.observable()
  self.selectedCategories = ko.observable()

  self.categoryList = ko.computed(function() {
    var product = self.selectedProduct();
    var filtered = ko.utils.arrayFirst(self.productList, function(p) {
      if (p.id == product) {
        return p
      }
    });
    if (!filtered) {
      return []
    } else {
      return filtered.categories;
    }
  })
}

function ProductViewModel() {
  var self = this

  self.products = ko.observableArray([new Product(productList)])

  self.addProduct = function() {
    self.products.push(new Product(productList))
  }.bind(self)

  self.removeProduct = function(product) {
    self.products.remove(product)
  }
}

ko.applyBindings(new ProductViewModel())

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div data-bind='foreach: products'>
  <label>Product</label>
  <select data-bind="attr: {name: 'products['+$index()+']'}, options: productList, optionsCaption: 'Select Product', optionsText: 'name', optionsValue: 'id', value: selectedProduct"></select>
  <div data-bind='with: selectedProduct'>
    <label>Categories</label>
    <select class='categories-select' data-bind="attr: {name: 'categories['+$index()+'][]', multiple: 'multiple'}, options: $parent.categoryList, optionsText: 'name', optionsValue: 'id', value: $parent.selectedCategories"></select>
  </div>
</div>
<a href='#' data-bind='click: addProduct'> Add </a>

＆＃13;

现在我想创建一个类似的HTML表单，它从后端获取数据，并使用类似布局中的现有值进行预生成。请注意，提取的数据中可能有多组此类下拉框。我想要选择的产品和类别以及每个值。

JSON可能类似于：

var productList = [{
  id: 1,
  name: 'product1',
  selected: true,
  categories: [{
    id: 1,
    name: 'category1'
    selected: true
  }, {
    id: 2,
    name: 'category2'
  }]
}, {
  id: 2,
  name: 'product2',
  selected: true,
  categories: [{
    id: 3,
    name: 'category3',
    selected: true
  }, {
    id: 4,
    name: 'category4',
    selected: true
  }]
},{
  id: 3,
  name: 'product3',
  categories: [{
    id: 5,
    name: 'category5'
  }, {
    id: 6,
    name: 'category6'
  }]
}]

Answer 1

好的，所以听起来你正试图填写服务器上的淘汰模板。您可以直接在nodejs中使用jsDOM和knockout。如果您的服务器不是nodejs，则必须创建nodejs服务器并通过API调用它。您传递了模板和数据，它会传递出HTML。唯一的问题是这有点慢。

如果你觉得你一个人在服务器上淘汰这些疯狂的事情，不要担心，你们在良好的公司中：other people正在尝试使用服务器上的模板语言与客户端上的模板语言相同。 Knockoff很酷，因为它只解析你可能在服务器上使用的最小的淘汰模板语法，保留了其余的语法，以便你可以在客户端上使用它，并且快速完成所有这些。 / p>

根据可用数据使用knockout预生成HTML元素

1 个答案: