Telerik Nativescript移动应用程序中的基本模糊事件 [英] Basic blur event in a Telerik Nativescript Mobile App

问题描述

我正在使用带有NativeScript的Telerik AppBuilder编写一个跨平台的移动应用程序。我正在努力弄清楚如何在TextField上获得基本的模糊或onTextChanged事件。我可以弄清楚如何做点击事件，但为什么要找到一个做模糊或onTextChanged的人的样本呢？

我试过这个：

  var tagField = view.getViewById（page，tfDescription）
 tagField。 set（onblur，function（eventData）{
 pageData.set（debug，blur this field：+ JSON.stringify（eventData））; 
}）; 
  

我还尝试了xml中我能想到的每个属性：

 < TextField id =tfDescriptionblur =bluronblur =bluronLoseFocus =blurfocusLost =blurtextChanged =blur row =2text ={{description}}/> 
  

这些都不起作用。有没有人知道如何做到这一点？

谢谢

解决方案

据我所知，NativeScript中没有模糊（类似）事件。但是，您可以对文本更改时做出反应。

您要做的是利用数据绑定机制和
可观察对象。

简而言之，数据绑定将允许您将业务模型/数据对象的用户界面（通常在XML文件中描述）连接起来。数据绑定可以是单向，这意味着您在数据对象中所做的任何更改都将反映在UI中。它也可以是两种方式，这意味着您在UI中执行的任何更改也将反映在您的数据对象中。

在您的情况下，您希望双向绑定为您希望UI（用户输入文本）中发生的任何事情都反映在您的模型中。

示例

xml

假设你有这个xml：

 < Page xmlns =http://www.nativescript.org/tns.xsdloaded =pageLoaded> 
< StackLayout> 
< TextField text ={{description}}/> 
< / StackLayout> 
< / Page> 
  

js

<为了便于理解，我对内联进行了评论。

  var observable = require（data / observable）; 
 
 function pageLoaded（args）{
 var page = args.object; 
 
 / ** 
 *创建一个新的Observable对象。 
 * / 
 var contextObj = new observable.Observable（）; 
 
 / ** 
 *将属性'description'设置为'hi there'。 
 *在您的XML中，您将此属性附加到
 *文本字段，如下所示：
 *< TextField text ={{description}}/> 
 *这意味着默认情况下，文本字段
 *预先填充'Hi there'
 * / 
 contextObj.set（description，Hi there） ; 
 
 / ** 
 *将可观察对象附加到页面的
 *'bindingContext'。这是一个
 *特殊属性，您想要附加
 *对象。默认情况下，绑定是双向的。 
 * / 
 page.bindingContext = contextObj; 
 
 / ** 
 *事件监听器。 
 *当用户更改UI中的文本时，这会在
 *下传播到contextObj，这将更改。在这里，我们为
 *更改添加一个事件监听器，并记录有关刚刚发生的更改的一些信息。 
 * / 
 contextObj.addEventListener（observable.Observable.propertyChangeEvent，function（event）{
 console.log（'对象已更改！'）; 
 console.log（'事件：'+ event.eventName）; 
 console.log（'propertyName：'+ event.propertyName）; 
 console.log（'新值：'+ event.value）; 
 console.log（''）; 
}）; 
 
} 
 exports.pageLoaded = pageLoaded; 
  

I am writing a cross-platform mobile app using Telerik AppBuilder with NativeScript. I am going nuts trying to figure out how to get a basic "blur" or "onTextChanged" event on a TextField. I can figure out how to do things like "tap" events, but then why is it so hard to find a sample of someone doing "blur" or "onTextChanged"?

I've tried this:

var tagField = view.getViewById(page, "tfDescription")
tagField.set("onblur", function(eventData) {
    pageData.set("debug", "blur this field: " + JSON.stringify(eventData));    
});

I've also tried every attribute I can think of in the xml:

<TextField id="tfDescription" blur="blur" onblur="blur" onLoseFocus="blur" focusLost="blur" textChanged="blur" row="2" text="{{ description }}" />

None of these work. Does anyone have any clue how to do this?

Thanks

解决方案

As far as I know there no blur(-like) event in NativeScript. However, you can react to when text is changed.

What you want to do is to utilize the Data Binding Mechanisms and the Observable Object in NativeScript.

Briefly, data binding will allow you to connect the user interface (most often described in your XML files) with your business model/data object. A data binding can be "one way" meaning that any changes you do in your data object will be reflected in the UI. It can also be two ways meaning that any changes you do in the UI will also be reflected back in your data object.

In your case, you want two way bindings as you want whatever happens in the UI (user input text) to be reflected in your model.

Example

xml

Let's say you have this xml:

<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="pageLoaded">
 <StackLayout>
   <TextField text="{{ description }}" />
 </StackLayout>
</Page>

js

I've commented inline for easier understanding.

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

function pageLoaded(args) {
    var page = args.object;

    /**
     * Creating a new Observable object.
     */
    var contextObj = new observable.Observable();

    /**
     * Setting the property 'description' to 'hi there'.
     * In your XML you'll attach this property to the
     * Text field as such:
     * <TextField text="{{ description }}" />
     * This means that the Text field will, by default
     * be prepopulated with 'Hi there'
     */
    contextObj.set("description", "Hi there");

    /**
     * Attaching the observable object to the
     * 'bindingContext' of the page. This is a
     * special property to which you want to attach
     * the object. By default bindings are two way.
     */
    page.bindingContext = contextObj;

    /**
     * Event listener.
     * When the user is changing the text in the UI, this gets propagated down
     * to the contextObj which will change. Here we add an event listener for
     * changes and log some information about the change that just happened.
     */
    contextObj.addEventListener(observable.Observable.propertyChangeEvent, function (event) {
        console.log('The object changed!');
        console.log('Event:        ' + event.eventName);
        console.log('propertyName: ' + event.propertyName);
        console.log('New value:     ' + event.value);
        console.log('');
    });

 }
 exports.pageLoaded = pageLoaded;

这篇关于Telerik Nativescript移动应用程序中的基本模糊事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！