钛合金数据绑定：如何从点击视图中获取当前模型？

Question

我是 Titanium Alloy、MVC 框架和 Backbone.js 的新手，所以我在理解一些概念时遇到了一些麻烦。

之前有人问过类似的问题：

Getting ID of clicked TableRow in Titanium Alloy?

Appcelerator Titanium Alloy: How to store data on a ScrollableView to use in click event

但是，尽管我试图按照答案进行操作，但我似乎无法让以下代码按预期工作。

基本上，在钛合金中进行数据绑定时，如何将当前模型传递给控制器​​？

（另外，这是我在这里的第一个问题，所以如果有任何地方可以改进我的查询，请告诉我，谢谢）。

型号

exports.definition = {
config: {
    columns: {
        "issueNo": "number",
        "date": "string",
        "summary": "string",
        "cover": "string"
    },
    adapter: {
        type: "sql",
        collection_name: "issue"
    }
},
extendModel: function(Model) {
    _.extend(Model.prototype, {
        // extended functions and properties go here
    });

    return Model;
},
extendCollection: function(Collection) {
    _.extend(Collection.prototype, {
        // extended functions and properties go here
    });

    return Collection;
}
};

查看

<Alloy>
<Collection src="issue" />
<Window class="container" onClose="cleanup">
    <View id="header">
        <Label id="title">Christian</Label>
    </View>
    <View id="library" class="body" layout="vertical" dataCollection="issue">
        <View id="issuesList" model="{alloy_id}" onClick="alertModel">
            <ImageView id="cover" image="{cover}"></ImageView>
            <Label id="date" text="{date}"></Label>
            <Label id="summary" text="{summary}"></Label>
            <View class="border"></View>
        </View>
    </View>
    <View id="store" class="body" layout="vertical" visible="false" backgroundColor="yellow">

    </View>
    <View id="footer">
        <TabbedBar id="bottomNav" platform="ios" index="0" onClick="viewSelect">
            <Labels>
                <Label>Library</Label>
                <Label>Store</Label>
            </Labels>
        </TabbedBar>
    </View>
</Window>
</Alloy>

控制器

var Newsstand = require("ti.newsstand");
Newsstand.enableDevMode();

var issues = Alloy.Collections.issue;
issues.fetch();

var issue1 = Alloy.createModel("issue", {
    issueNo: 1,
    date: "1/1/2014",
    summary: "Some text.",
    cover: "/issues/cover_1.png"
});

var issue2 = Alloy.createModel("issue", {
    issueNo: 2,
    date: "1/2/2014",
    summary: "Some text.",
    cover: "/issues/cover_2.png"
});

var issue3 = Alloy.createModel("issue", {
    issueNo: 3,
    date: "1/3/2014",
    summary: "Some text.",
    cover: "/issues/cover_3.png"
});

issues.add(issue1);
issues.add(issue2);
issues.add(issue3);


function viewSelect(tabbedBar) {
    var index = tabbedBar.index,
        library = $.library,
        store = $.store,
        bottomNav = $.bottomNav;

    if (index === 0) {
        library.visible = true;
        store.visible = false;
    } else {
        store.visible = true;
        library.visible = false;
    }
}

function alertModel(e){
    var modelId = e.model,
        model = issues.get(modelId),
        issueNumber = model.get("issueNo");

    alert(issueNumber);
}

function cleanup() {
    $.destroy();
}

$.index.open();

Answer 1

根据 OP 的评论更新答案：

在您发布的第二个链接上，如果将数据绑定到视图，则表示您需要在视图模板中的所有元素上设置 touchEnabled="false"，然后在 alertModel 函数中使用 e.source.model。经过测试，它对我有用。

var modelId = e.source.model,
        model = issues.get(modelId),
        issueNumber = model.get("issueNo");

我总是使用 ListViews 来绑定我的数据，你不需要在使用时显式设置 touchEnabled。

此外，alloy_id 在您将模型保存到数据库之前不会被创建。在你的集合上调用 .add() 不会保存它，你必须在你的模型上调用 .save() 才能保存它。

示例：https://github.com/foolprooflabs/testforcurzmg