通过 JSON 将 HTML 复选标记传递到具有 Knockout.JS 的表中

Passing HTML checkmark through JSON into a table with Knockout.JS

本文关键字：Knockout JS HTML JSON 通过      更新时间：2023-09-26

我有一个大表格，里面装满了一堆使用挖空的数据.JS。其中一些数据需要替换为 HTML 复选框和选择，但它不是一致的。我有一个包含我所有数据的对象数组。为了简化起见，每个对象都有 3 个属性。标题、值和格式。我尝试仅更改格式为复选框或选择的表格的值单元格。

例如，原始表如下所示：

标题 |价值 |格式--------+-------+-------身高 |5 |国际长度 |7 |国际真 |1 |复选框要求 |0 |复选框

但我想要这样：

标题 |价值 |格式--------+-------+-------身高 |5 |国际长度 |7 |国际真 |☑     |复选框要求 |☐     |复选框

示例代码 （PHP）：

首先，我遍历对象数组，如果格式属性为"复选框"，则插入 HTML 复选框而不是值。 

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

然后我使用json_encode(array);

（JS）这是Ajax的成功

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

然后，我遍历了 valve 数组中的每个对象并提取了所需的属性：

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>不是实际元素。这是淘汰赛还是我的 JSON 的问题？MY JSON 在引号中返回 HTML，因为它存储为字符串，有没有办法删除它们或其他东西？

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

问题是你根本没有使用Knockout。

对于使用挖空：

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

至于显示复选框或仅显示文本，您可以使用挖空if绑定。

您的模板应该看起来像这样：

<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 或模型，并且只调用 applyBindings 。注意：我不是PHP专家，但我知道有一种方法可以将PHP对象直接序列化为JSON，因此制作AJAX部分非常容易。请看这个。

上面的一些无容器控件不正确，但这个想法很好。这是固定代码 

<table>
   <tbody data-bind='foreach: row'>
      <tr>
         <td data-bind='text: title'>
         </td>
         <td>
            <!-- ko if: format=='Checkbox' -->
               <input type='checkbox' data-bind='checked: value`/>
            <!-- /ko -->
            <!-- ko if: format!='Checkbox' -->
               <!-- ko text: value --><!-- /ko -->
            <!-- /ko -->
         </td>
         <td data-bind='text: format'>
         </td>
      </tr>
   </tbody>
</table>
相关文章：