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);
    },
}

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

免费注册，快速体验

还需要帮助吗? 联系我们
最新更新 8th Jul 2021