MVVM常见问题

1、MVVM学习文档有哪些?

解决方式

appcan.js使用到的js框架:
zepto.js 参考文档: http://www.css88.com/doc/zeptojs_api/
underscore.js 参考文档: http://www.css88.com/doc/underscore/
backbone.js 参考文档: http://www.css88.com/doc/backbone/
backbone-nested.js 参考文档: https://github.com/afeld/backbone-nested
epoxy.js 参考文档: http://epoxyjs.org/

2、向一个控件中添加子控件时,要注意什么?

解决方式

要使其父级获取焦点

3、使用MVVM模型时,数据绑不上?

解决方式

1)如果存在mvvm-scope,位置可能写的不对
2)可能是没有在Model或者collection中初始化绑定的参数。
defaults:{}
一般情况出现在Model中 defaults中初始化要有相应的字段,如:defaults:{"typeName":"","typeId":""}
注意:如果没有使用设计器自动生成代码,而是使用自己编写的代码时,可能会因为某些属性写的位置的问题 导致页面不能显示数据,建议使用设计器来生成代码。

4、 如何制作一个抽屉页面?

解决方式

需要在page中分别添加header,page0,page1,其中header、page0、page1这三个控件在同一级目录
Page0中书写抽屉内容,设置其大小:宽100%,定位方式:fixed,位置:0,0
Page1中书写主页面内容

5、 让列表展示成一行有多列的形式如何构建

解决方式

一行有两列:使用ul控件 再在ul控件中添加正方形盒子控件,选择属性中的双向列表。

[data-control="CUSTOMLISTVIEW"].col2 li {
    width: 49%;
    margin-right: 0.5%;
    float: left;
    position: relative;
}

一行有3列:使用ul控件再在ul控件中添加正方形盒子控件,选择属性中的双向列表,导出后添加col3的样式。

[data-control="CUSTOMLISTVIEW"].col3 li {
    width: 33%;
    margin-right: 0.3%;
    float: left;
    position: relative;
}

要注意的是 一行的列数乘以宽度再加上margin值不要超过100%。

6、如何在MVVM中书写点击按钮触发事件?

解决方式
var ViewModel = new(MVVM.ViewModel.extend({
    el: "body",
    initialize: function() {
        this.collection.fetch({})
        return;
    },
    collection: Collection,
    events:{
      'tap #Button':'delBook'
    },
    delBook:function(){
        alert('hello')
    }
}))();

7、假如页面中有多个pane,每个pane下对应一个slider,切换tab标签slider不显示怎么办?

解决方式

问题原因:
当切换slider时,因为初始化加载slider时其他pane默认display:none,此时获取不到slider的宽高,因此无法显示slider。
解决方案:
切换tab标签时,先给当前显示的标签display:block后再初始化slider就可显示。
解决代码:

tabview_Tab_m7gnm8.on('click',function(obj,index){
    $('.tab_pane').removeClass('active');
    $($('.tab_pane')[index]).addClass('active');
    slider($($('.tab_pane')[index]).find('.slider').attr('id'))
 })
function slider(id) {
    var slider_Slider_DdVcfM = appcan.slider({
        selector: $("#"+id),
        aspectRatio: 0.38 || 6 / 16,
        hasLabel: true,
        index: 0
    });
    slider_Slider_DdVcfM.set([{
        "img": "http://newdocx.appcan.cn/docximg/IDE_loading1.png",
        "label": "图片"
    },
    {
        "img": "http://newdocx.appcan.cn/docximg/IDE_loading2.png",
        "label": "图片"
    },
    {
        "img": "http://newdocx.appcan.cn/docximg/IDE_loading3.png",
        "label": "图片"
    },
    {
        "img": "http://newdocx.appcan.cn/docximg/IDE_loading4.png",
        "label": "图片"
    }]);
    slider_Slider_DdVcfM.on("clickItem",
    function(index, data) {});
}

8、页面样式问题

解决方式

ContentFlexVer的padding-top值不能加在当前标签,要加到它的子标签上,不然会出现滚动条。

9、tabview和多个pane存在,当切换tab时如何让对应的pane加载新的数据?

解决方式

当切换tab时,需使用fetch重新获取接口数据。
例:ViewModel.collection.fetch({})

10、列表中获取用户点击的是第几条数据?

解决方式
itemEvents: {
    "tap #Box": function(ev, param) {
        var index = _.indexOf(_.pluck(Collection.models, 'id'),this.model.get("id"));
        alert("它点击我了" + index);
    },
}

以上信息是否解决您的问题?

免费注册,快速体验

还需要帮助吗? 联系我们
最新更新 22nd Mar 2017