javascript - 在简单示例中，Enyo 自定义事件未处理且未定义

Question

我正在学习 Enyo js 框架中的事件，但不明白为什么会收到错误并且事件 onModelChanged 未处理。错误信息是:

"Uncaught TypeError: undefined is not a function"

代码:

debugger; 
enyo.kind({
    name : "MyModel",
    kind: "enyo.Model",
    defaultSource: "mocked",
    published: {
        title : "not set",
        text : "not set",       
    },
    
    events : {
        onModelChanged : "",
    },
    
    handlers: {
        onModelChanged : "modelLoadedHandler" 
    },
    
    modelLoadedHandler : function(inSender, inEvent){
        debugger;
        console.log("handler in model");
        console.log(inEvent.textMsg);
        return true;
    },
        
    fetch : function(opts){
        this.inherited(arguments);
        debugger;
        this.doModelChanged({textMsg: "fire event"}); // Uncaught TypeError: undefined is not a function
            
    }       
        
});



var model = new MyModel();
model.fetch();

附注将此代码保留为答案，以免被 jsfiddle 删除

enyo.kind({
    name: "MyMockSource",
    kind: "enyo.Source",
    fetch: function(model, opts) {
        if(model instanceof enyo.Model) {
            opts.success({title: "testing", text: "Some stuff"});
        } else {
            throw new Error("Model mock only");
        }
    }
});

new MyMockSource({name: "mocked"});

enyo.kind({
    name : "MyModel",
    kind: "enyo.Model",
    source: "mocked",
    attributes: {
        title : "not set",
        text : "not set",       
    },
    fetched: function(opts){
        this.inherited(arguments);
        enyo.log("fetched");
        // Do something here if you need to, otherwise you might want to overload
        // the parse method and set parse: true to modify the retrieved data
    },
    titleChanged: function(was, is) {
        enyo.log("Title is now: " + is);
    }
});

enyo.kind({
    name: "MyView",
    components: [
        {kind: "Button", content: "Fetch", ontap: "fetch"},
        {name: "title"},
        {name: "text"}
    ],
    bindings: [
        {from: "model.title", to: "$.title.content"},
        {from: "model.text", to: "$.text.content"}
    ],
    fetch: function() {
        this.set("model", new MyModel());    // Probably want to create model elsewhere
        this.model.on("change", enyo.bindSafely(this, "modelChanged"));
        this.model.fetch();
    },
    modelChanged: function() {
        this.log("Something happened to my model!");
    }
});

new enyo.Application({ name: "app", view: "MyView" });

Answer 1

enyo.Model 不是 enyo.Object(更不用说 enyo.Component)。它不支持已发布的属性或事件。您想要为模型定义属性。您仍然可以使用 propertyChanged 事件或使用 observers 获取有关属性更改的通知。

此外，如果您想知道提取已完成，您可能需要重载fetched。 fetch 可能会在获取数据之前返回。

如果您想从外部订阅事件，那么您可能需要使用 model.on('change')< 绑定(bind)到模型上的特定属性或 changed 事件 (请注意，这是与其他地方使用的 events: [] 系统不同的事件系统。

更新:这里有一个 fiddle ，展示了使用模型和绑定(bind)到数据的各种方法

http://jsfiddle.net/RoySutton/5jo0p7ar/