对象的属性值是数组,如何使用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. 绑定

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

 

为了得到而努力

2018-07-11

转载请注明来处。

posted @ 2018-07-11 19:46  为了得到而努力  阅读(271)  评论(1编辑  收藏  举报