Question

我试图在Ext JS 6.0.2组件中使用双向绑定。但是，就我所知，它根本无法实现，或根本无法实现。我创建了一个最小的例子：

Ext.define('MyComponentController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.mycomponent'
});

Ext.define('MyComponentModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.mycomponent'
});

Ext.define('MyComponent', {
    extend: 'Ext.Component',
    xtype: 'mycomponent',

    viewModel: {
        type: 'mycomponent'
    },
    controller: 'mycomponent',

    config: {
        thing: 'a defualt value'
    },
    bind: {
        thing: '{thing}'
    },
    twoWayBindable: 'thing'
});

var myComponent = Ext.create('MyComponent', {
    thing: 'a new value'
});

// Use setTimeout to give bindings time to update.
setTimeout(function() {
    console.log(myComponent.getViewModel().get('thing'));
}, 1000);

我在这里也有一个Sencha小提琴：https://fiddle.sencha.com/#fiddle/1efk

我希望运行此代码的目的是看到a new value已登录到控制台。相反，我得到null。即使我设置了bind和twoWayBindable，我的视图中设置的值也不会发布到我的视图模型。我误解了如何使用双向绑定吗？

Answer 1

Take a look at this example: Fiddle

It's a fork of your example. I've added a few things:

Ext.application with a launch method and placed the creation of myComponent here.
rendered myComponent to Ext.getBody().
an update method for the thing config, which logs its value when changed.
a ViewModel binding, which logs its value when changed.

~~Ext does not set up bindings until the viewmodel is initialized. This does not happen until the view itself is initialized. That's why why it's necessary to render it.~~ As Mitchell Simoens correctly pointed out, instantiating a view will initialize it and its viewmodel, even when it isn't rendered. In my example, however, the viewmodel bind callback is only executed when i'm actually rendering the view.

Also, keep in mind that bindings are scheduled and do not fire instantly.

In case you haven't seen it, here's Ext JS's two-way binding example.

I hope this clarifies things!

Answer 2

将console.log(myComponent.getThing());行替换为：

ALTER PROCEDURE [Deal].[USP_LoadDealHistoryByDealId]
    (@DealId int,
     @chk int)
AS
    IF (@chk = 1)
    BEGIN 
        SELECT 
            DDT.FieldType AS field,
            DDT.OldValue as old,
            DDT.NewValue as new,
            AU.FullName AS Name,
            DDT.UpdateOn AS UpdatedOn
        FROM 
            [Deal].[DealTransaction] as DDT
        INNER JOIN
            AD.Users as AU ON AU.UserId = DDT.[UpdateBy]
        WHERE
            DDT.dealId = @DealId
    END
    ELSE if(@chk = 2)
    BEGIN 
        SELECT 
            'No Data' as field ,
            0 as old ,
            0 as new ,
            AU.FullName AS Name,
            DD.UpdatedOn AS UpdatedOn
        FROM  
            AD.Users as AU
        INNER JOIN 
            [Deal].[Deals] AS DD ON AU.UserId = DD.UploadedBy
        WHERE
            DD.dealId = @DealId
    END

双向绑定不更新视图模型

2 个答案: