javascript - 使用 Knockout.JS 将 HTML 复选标记通过 JSON 传递到表中

Question

我有一个大表，其中使用knockout.JS 填充了一堆数据。其中一些数据需要用 HTML 复选框和选择替换，但基础不一致。我有一个包含所有数据的对象数组。为简单起见，每个对象都有 3 个属性。标题、值和格式。我试图仅更改格式为复选框或选择的表格的值单元格。

例如，原始表格如下所示:

Title   | Value | Format--------+-------+------- Height  | 5     | intLength  | 7     | inttrue    | 1     | checkboxrequire | 0     | checkbox

But I want it like this:

Title   | Value | Format--------+-------+------- Height  | 5     | intLength  | 7     | inttrue    | ☑     | checkboxrequire | ☐     | checkbox

Example code (PHP):

First I loop through the array of objects and if the format property is "checkbox" then insert the HTML Checkbox instead of the value.

        .....loop....

        if($format == "Checkbox"){
            $value = '<input type="checkbox"></input>';
        }

然后我使用json_encode(array);

(JS)这里是ajax成功

success: function(data){
    var valve = JSON.parse(data);
};

然后我循环遍历阀门阵列中的每个对象并提取所需的属性:

for(var i=0, l=valve.length; i<l; i++){         
    if(valve[i]['formatfor(var i=0, l=valve.length; i<l; i++){          
        if(valve[i]['format']=="checkbox"){
            var formatHTML = '<input type="checkbox"></input>';
        };

        var dataRow ={
            title: valve[i]['title'],
            value: valve[i]['value'],
            format: formatHTML
        };

        //push each row to valveData which is a ko.observableArray()    
        self.valveData.push(dataRow);

};          

我的表格填充得很好，但我最终得到的是原始 HTML:<input type="checkbox"></input>不是实际的元素。这是 knockout 的问题还是我的 JSON 的问题？我的 JSON 返回引号中的 HTML，因为它存储为字符串，有没有办法删除它们或其他内容？

更高级别的问题，我应该这样做吗？或者我应该在数据模型中处理格式类型。

Answer 1

问题在于您根本没有使用 Knockout。

对于使用 knockout :

• 返回带有属性的纯 JSON 对象(¡不是生成 HTML!!)
• 可选:理想情况下，使用 ajax 获取 JSON，而不是直接在页面正文中编写对象定义。也就是说，您的 php 代码应该返回一个 JSON 对象，并且您应该使用像 jQuery.getJSON 这样的东西直接从 PHP 服务器获取该数据
• 将您的 JSON 对象插入到 knockout viewModel 中，即映射 JSON 中的属性。您可以使用 ko.mapping 插件自动执行此操作。这会将您的 JSOn 对象数组转换为 observableArray，并将您的 JSON 对象属性转换为 observable
• 创建一个模板来渲染对象
• 将对象绑定(bind)到模板

至于显示复选框或仅显示文本，您可以使用 knockout if 绑定(bind)。

您的模板应如下所示:

<table>
   <tbody data-bind='foreach: row'>
      <tr>
         <td data-bind='text: title'>
         </td>
         <td>
            <!-- ko if: format=='Checkbox' -->
               <input type='check' data-bind='checked: value`/>
            <!-- /ko -->
            <!-- ko if: format!='Checkbox' -->
               <!-- ko text: value --><!-- /ko -->
            <!-- /ko -->
         </td>
         <td data-bind='text: format'>
         </td>
      </tr>
   </tbody>
</table>

您的 JSON 对象应该是这样的:

[
   { "title": "height", "value": "5", "format": "int"},
   { "title": "length", "value": "7", "format": "int"},
   { "title": "true", "value": "1", "format": "checkbox"},
   { "title": "required", "value": "0", "format": "checkbox"},
]

你的 JavaScript 应该是这样的:

$.getJSON('... your PHP url ...').done(function(data) {
    var viewModel = // construct from data, by hand, or with ko.mapping
    ko.applyBindings(viewModel);
});

注意:如果您不使用 AJAX，您可以直接在页面内容上定义 var 或 model，并仅调用 applyBindings。 注意:我不是 PHP 专家，但我知道有一种方法可以将 PHP 对象直接序列化为 JSON，因此制作 AJAX 部分非常容易。 Please, see this .