对象的属性值是数组，如何使用ko跨页面绑定?

问题描述：

数据类型是 result = {'key1':[{'code':code,'name':name,...},...],'key2':[{'code':code,'name':name,...},...],...},

需转换成dataObj = {'key1':observableArray(),'key2':observableArray(),...}；

页面：mainFrom.js,mainFrom.html,subTo.js,subTo.html;

将在mainFrom.js中查询到的dataObj 绑定到subTo.html上。

js文件的结构符合AMD规范，如下：

 1 define([ 'jquery', 'knockout', 'html文件路径+文件名.html'], function($, ko, template) {
 2     var viewModel;
 3     viewModel = {
 4             
 5     };
 6     var init = function(args) {
 7          
 8     };
 9     return {
10         'model' : viewModel,
11         'template' : template,
12         'init' : init
13     };
14 });

解决方法：

1. 在mainFrom.js中查询到result的值，将result的属性对应的值转为observableArray类型。使用ajax查询；

2. 使用require([],function(){})调用subTo.html，并将dataObj的属性附加到subTo.js的viewModel上；

代码如下：

 1 define([ 'jquery', 'knockout', 'html文件路径+文件名.html'], function($, ko, template) {
 2     var viewModel;
 3     var dataObj;//dataObj作为全局变量
 4     viewModel = {
 5             fromHere : function() {
 6                 /*module是[]中的文件的重命名；
 7                   subTo返回：
 8                       'model' : viewModel,
 9                       'template' : template,
10                       'init' : init
11                 */
12                 var args = {};//根据需要修改
13                 require(["subTo路径+subTo（不加.html后缀）"], function(module) {
14                     //核心代码，将dataObj的属性附加给subTo.js的viewModel，一定是在subTo.html加载前执行
15                     for ( var key in eleMents) {
16                         module.model[key] = dataObj[key];
17                     }
18                     
19                     $("#subToDiv").html(module.template);//加载subTo的区域，module.template是subTo.html
20                     module.init(args);//subTo.js的入口
21                 });
22             }
23     };
24     var init = function(args) {
25         $.ajax({
26             url: 'url方法路径',
27             type: 'POST',
28             data:{'filed':...},//传递到后台的参数
29             success :function(result){
30                 if (result) {
31                     //核心代码，转换数据类型
32                     for ( var key in result) {
33                         dataObj[key] = ko.observableArray(result[key]);
34                     }
35                 }
36             }
37         });
38     };
39     return {
40         'model' : viewModel,
41         'template' : template,
42         'init' : init
43     };
44 });

这时subTo的viewModel有了key1,key2,...等ko数组，将它们绑定到subTo.html对应的select标签上

3. 绑定

<div>
    <select data-bind="foreach:key1()"><!-- key1后面加()，是因为viewModel中对应的key1是function，故要加 -->
        <option data-bind="attr:{value:code},text:name"></option>
    </select>
    <select data-bind="foreach:key2()">
        <option data-bind="attr:{value:code},text:name"></option>
    </select>
</div>

 

为了得到而努力

2018-07-11

转载请注明来处。