解决

Question

我正在尝试使用带有jquery mobile ttps的ember js：//github.com/LuisSala/emberjs-jqm

如何在ember工具中扩展自定义视图。我尝试过类似的东西但它没有用。

var MobileBaseView = Ember.View.extend({
    attributeBindings:['data-role']
});
module.exports = MobileBaseView;

和

var MobileBaseView = require('MobileBaseView');
var PageView = MobileBaseView.extend({
    'data-role': 'page'
});
module.exports = PageView;

它不起作用

的的 *更新* * ** * 在实施了主人的建议后（谢谢）。我观察到多级扩展在我的情况下不起作用。

我有

移动基本视图：

var MobileBaseView = Ember.View.extend({
    attributeBindings:['data-role']
});
module.exports = MobileBaseView;

工具栏视图：

var ToolbarBaseView = App.MobileBaseView.extend({

    attributeBindings:['data-position'],
    'data-position': function() {
        if (this.get('isFullScreen')) {
            return 'fullscreen'
        }

        if (this.get('isFixed')) {
            return 'fixed'
        }
        return ''
    }.property('isFixed', 'isFullScreen').cacheable(),
    isFixed: true,
    isFullsScreen: false
});
module.exports = ToolbarBaseView;

和我的模板中的一行

{{view App.ToolbarBaseView}}

这项工作很好

但是只要我再添加一个视图 标题视图

var HeaderView = App.ToolbarBaseView.extend({
    'data-role': 'header'
});
module.exports = HeaderView;

并添加行

{{view App.HeaderView}}

我收到错误未捕获的TypeError：无法调用未定义的方法'extend'

解决

使用ember app kit

import ToolbarBaseView from 'appkit/views/toolbar_base_view';

var HeaderView = ToolbarBaseView.extend({
    'data-role': 'header'
});

export default HeaderView;

Answer 1

解决问题的关键是将其分解为单独的问题。如果您在查看时遇到问题，可以参考以下视图

http://emberjs.jsbin.com/OhUFOXe/2/edit

App.CustomView = Ember.View.extend({
  tagName: 'p',
  templateName: 'customView',
  myColor: 'N/A',
  attributeBindings:['data-color'],
  'data-color': 'purple', 
  didInsertElement: function(){
    var col = this.$().data('color');
    this.set('myColor',col);
  }
});

App.OtherCustomView = App.CustomView.extend({
  'data-color': 'green',
  templateName: 'otherCustomView'
});

如果视图不正常，则可能是您的模块框架。视图是否正常工作，只是其中一部分未正确注入？

如果框架看起来是正确的，并且注入视图（可能是错误的）是jquery mobile的问题？是否期望元素不是div？

如何在ember工具中扩展自定义视图

解决

1 个答案: