Nativescript - 使用按钮参考访问“绑定上下文”答案

【问题标题】：Nativescript - accessing 'Binding Context' with a Button ReferenceNativescript - 使用按钮参考访问“绑定上下文”
【发布时间】：2019-12-09 04:33:54
【问题描述】：

我是本机脚本的新手。我正在使用 Brosteins 的“thenativescriptbook”来学习基础知识。

我试图理解 <Button tap=EventHandler> 与 <Page Loaded=EventHandler> 传递的参考/参数。我觉得按钮事件处理程序应该只传递对 <button></button> 内容的引用......而不是 <page></page> 内容（其中包含它）？因此 bindingContext 不应该访问 <page></page> 中的项目，而是访问 <button></button> 中的项目？（显然我知道这不是真的；我也知道变量名无关紧要（即页面））

如果您查看下面的代码，我的理解是“onLoaded”“args.object”传递的引用是<page> 引用（然后将依次监视<page></page> 中的数据绑定项） . “onTap”“args.object”在哪里仅引用<button></button> 内容？（不包括数据绑定的项目）？

当 onTap 事件处理程序似乎只指向 <button></button> 时，它如何访问 <page></page> 数据绑定上下文？

    scrapbook-page.xml

        <Page loaded="onLoaded">
            <StackLayout>
                <Label text="Title: " />
                <TextField class="header" text="{{title}}" />
                <Label text="Age: " />
                <DatePicker date="{{ date }}" />
                <Label text="Gender: " />
                <ListPicker items="{{ genders }}" selectedIndex="{{ gender }}" /> 
                <Button tap="onTap" text="Done" />
           </StackLayout>
        </Page>

    scrapbook-page.js

        var observable = require("data/observable");

        exports.onLoaded = function (args) {
            var page = args.object; // this is referencing the <page> object
            var scrapbook = new observable.fromObject({ 
                genders: ["Female", "Male", "Other"],
                gender: null, //#A
                date: null,    //#A
                title: null //#A
            });                                         

            page.bindingContext = scrapbook;
        };

        exports.onTap = function (args) {
            var page = args.object; // this is referencing the <button> object? not <page>
            var scrapbook = page.bindingContext;

            console.log("You have made " + scrapbook.title);
            console.log("Age: " + scrapbook.date.toLocaleDateString());
            console.log("Gender selected:" + scrapbook.genders[scrapbook.gender]);
        }

感谢任何帮助清理看似基本的东西。

谢谢:)

【问题讨论】：

标签： javascript button event-handling nativescript

【解决方案1】：

args.object 仅在整个应用程序中指向页面对象。按钮是它的孩子。重要的是要注意 args.object 是单例的，即使您尝试创建更多 args.object 它也仅引用先前创建的对象地址。所以在页面的 onloaded 事件中你已经创建了 args.object 然后在按钮点击你正在访问它。希望这会有所帮助....

【讨论】：

【解决方案2】：

每个对象都会引用它所在的页面，所以args.object.page 应该为您解决问题。除了在您的示例中，按钮和页面的bindingContext 应该相同，bindingContext 可能仅在Repeater / ListView 等组件中的每个项目不同。

请通过API reference 获取此类信息。

【讨论】：