使用 knockout 显示来自 couchDb 的所有数据

Question

我可以将行显示到 myField 中，但我想遍历所有行。我想在 html 中以格式化文本显示所有名称。我想在我的 HTML 视图中使用 for-each，但我真的卡在这里了。

我来自 couchDB 的 JSON 看起来像这样：

{"total_rows":8,"offset":0,"rows":[
 {"id":"f1abbf3ccb0f15d6a66f7eadab003f53","key":"AccessBareBoneApp","value":{"Properties":{"Properties":[]},"Implements":{"Interfaces":[{"TypeName":"ITSR2.Bricks.Access.IAccessBareBoneBrick"},{"TypeName":"ITSR2.Bricks.Access.IAccessAppBrick"}]},"Name":"AccessBareBoneApp","Description":"","TypeName":"ITSR2.Bricks.Access.AccessBareBoneApp","AssemblyName":"ITSR2.Bricks.MSOffice, Version=3.0.0.0, Culture=neutral, PublicKeyToken=null","Obsolete":false}},

我的main.js文件：

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

}

var db = new PouchDB('http://localhost:5984/helloworld');

var vm = new ViewModel();

db.query("bricksetup/docs").then(function(result) { 
  var data = result;
  console.log(data);
  data.rows.forEach(function(row){
      vm.data.push(row.value)
  // vm.myfield(data.rows[3].value.Name);
 // vm.myfield2(data.rows[2].value.Name);
  })
   vm.myfield(data.rows[3].value.Name);
});

ko.applyBindings(vm);

我的index.html：

      <h3>Brick Infos</h3>
       <div data-bind="">
         <p> 
            <b>Name:</b>
            <span data-bind="text:myfield"></span>
            <b>Description:</b>

            <span data-bind=></span>
            <b>TypeName:</b>
            <span data-bind=></span>
            <b>AssemblyName</b>
            <span data-bind=></span>
            <b>Obsolete</b>
            <span data-bind=></span>
          </p>
          <p data-bind=>
          <b>Name:</b>
            <span data-bind=></span> |
          <b>Validation Type:</b>
            <span data-bind=></span><br>
          </p>
        </div>

Answer 1

您需要在 Javascript 方面做更多的工作，假设会有不止一行，然后将其分配给 ko.observableArray。这是 self.myfield 的目的吗？

假设是，然后使用类似 self.myfield(data.rows) 的方式设置 self.myfield。漂亮又简单，不需要那么多力气！

在 HTML 一侧，对于每一行你需要一个 data-bind 例如

<h3>Brick Infos</h3> <div data-bind="foreach: self.myfield">

我认为这可行 - 我使用 ES6 Javascript 所以我不必使用 self = this，我只需要使用 foreach: myfield

html 的其余部分未使用正确的 data-bind 语法。每个字段都需要 <p><span class="title">Field Title</span><span class=text data-bind="text: data.fieldName"></span></p>

然后创建一个 css class 以突出显示标题并将字段标题替换为您希望向用户显示的任何字段标题，并将字段名称替换为相关的字段名称，例如名称、描述、类型名称等

注意可能具有多个值的项目，例如 Implements.Interfaces 如果需要，请使用 data-bind=:foreach data.Implements.Interfaces 在页面上重复这些项目。

Answer 2

您正在推进 vm.data，但 observableArray 字段是 myfield。然后将 observableArray 的值设置为一个数据项的名称字段。这是一个非常混乱的方法。

看起来您的查询将返回一个包含 rows 的结果，这（或多或少）是您在数组中想要的结果。

db.query("bricksetup/docs").then(function(result) { 
  vm.myfield(result.rows);
});

看起来每一行都有一个 value 对象，您感兴趣的字段就在其中。

  <h3>Brick Infos</h3>
  <div data-bind="foreach:myfield">
      <b>Name:</b>
      <span data-bind="text:value.Name"></span>
  </div>

这应该能让您以最少的代码行开始。您可能希望重新映射行以将值对象放入 myfield。

Answer 3

您只需像这样 vm.myfield(data.rows); 将 data.rows 传递给您的变量 myField 。将其放在 console.log 下并删除 forEach 循环。

在 Index.html 上：

<div data-bind="foreach:myfield"> <span data-bind="text:value.Name"></span> </div

希望对您有所帮助

使用 knockout 显示来自 couchDb 的所有数据

Display all data from couchDb with knockout

html

javascript

couchdb

knockout.js

pouchdb