Question

当我调用this.rerender();时，我试图在DOM中重新呈现组件HTML在下面的示例中，我有一个将数据保存到服务器的表单，在此之后我想重置表单这样用户就可以提交更多数据。我不想单独清除每个属性（这只是一个例子，除了表单之外还有其他用途）。目前，当我运行this.rerender();时，它会调用didRender()等方法，但不会替换DOM中的HTML。

有没有人知道如何做到这一点？

示例：

route.hbs

{{my-component}}

MY-component.js

actions: {
    submit: {
        // save form data to server, etc.
        this.rerender(); // re-render html in DOM
    }
}

MY-component.hbs

<form {{action 'submit' on='submit'>
    {{input id='name' value=name}}
    <button class="btn green" type="submit">Login</button>
</form>

Answer 1

它重新呈现DOM，但也会重新附加您在组件中设置的所有变量。一个好方法是在组件上有一个可以替换的用户数据变量。

你的组件中有这样的东西：

public class activity_home extends ActionBarActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_home);
    Context context = this;
    new AlertDialog.Builder(context)
            .setTitle("Alert")
            .setMessage("Do you want to enable the app right now?")
            .setPositiveButton("Yes", new DialogInterface.OnClickListener() 
{
                 public void onClick(DialogInterface dialog,int id) {
                    // go to a new activity of the app

                    Intent positiveActivity = new 
Intent(getApplicationContext(),

                            PositiveActivity.class);

                    startActivity(positiveActivity);

                }

            })

    .setNegativeButton("No", new DialogInterface.OnClickListener() {
        public void onClick(DialogInterface dialog, int which) {
            // do nothing
        }
    })


            .setNeutralButton("Remind Me later", new 
DialogInterface.OnClickListener() {
                        public void onClick(DialogInterface dialog, int 
which) {
                            // do nothing
                        }
                    }

            )


            .

                    setIcon(android.R.drawable.ic_dialog_alert)


            .show();
}}
PositiveActivity.java:
public class PositiveActivity extends FragmentActivity {
ListView listView;
ArrayList<String> listname;
ArrayList<String> list_no;
Context context;
LayoutInflater inflater;


@Override 
protected void onCreate(Bundle savedInstanceState) {





    super.onCreate(savedInstanceState);
    setContentView(R.layout.positive_view);
    Context context = this;
    listView = (ListView) findViewById(R.id.mobile_list);
    TextView textView = new TextView(context);
    textView.setTypeface(null, Typeface.BOLD);
    textView.setHeight(100);
    textView.setText("Define Specifications for Enabling Auto Pickup!");

    listView.addHeaderView(textView);


    // Array of strings...
    String[] mobileArray = new String[] {"Add Numbers to the list","Select 
Timer","Pick Selection Mode"};


    final ArrayAdapter <String> adapter = new ArrayAdapter<String>(this,
            android.R.layout.simple_list_item_1, android.R.id.text1, 
mobileArray);


    listView.setAdapter(adapter);

    // ListView Item Click Listener
    listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {

        @Override
        public void onItemClick(AdapterView<?> parent, View view,
                                int position, long id) {

            // ListView Clicked item index
            int itemPosition = position;

            // ListView Clicked item value
            String itemValue = (String) 
listView.getItemAtPosition(position);
            if (itemPosition == 1) {


               ContactListFragment fragmentS1 = new ContactListFragment();

getSupportFragmentManager().beginTransaction().replace
(R.id.headlines_fragment, 
fragmentS1).commit();


            }}});}}

And the code of Fragment:

import android.support.v4.widget.SimpleCursorAdapter;

public class ContactListFragment extends ListFragment implements 
LoaderCallbacks<Cursor> {

private CursorAdapter mAdapter;

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    // create adapter once
    Context context = getActivity();
    int layout = android.R.layout.simple_list_item_1;
    Cursor c = null; // there is no cursor yet
    int flags = 0; // no auto-requery! Loader requeries.
    mAdapter = new SimpleCursorAdapter(context, layout, c, FROM, TO, flags);
}

@Override
public void onActivityCreated(Bundle savedInstanceState) {
    super.onActivityCreated(savedInstanceState);

    // each time we are started use our listadapter
    setListAdapter(mAdapter);
    // and tell loader manager to start loading
    getLoaderManager().initLoader(0, null, this);
}

// columns requested from the database
private static final String[] PROJECTION = {
        Contacts._ID, // _ID is always required
        Contacts.DISPLAY_NAME_PRIMARY // that's what we want to display
};

// and name should be displayed in the text1 textview in item layout
private static final String[] FROM = { Contacts.DISPLAY_NAME_PRIMARY };
private static final int[] TO = { android.R.id.text1 };

@Override
public Loader<Cursor> onCreateLoader(int id, Bundle args) {

    // load from the "Contacts table"
    Uri contentUri = Contacts.CONTENT_URI;

    // no sub-selection, no sort order, simply every row
    // projection says we want just the _id and the name column
    return new CursorLoader(getActivity(),
            contentUri,
            PROJECTION,
            null,
            null,
            null);
}

@Override
public void onLoadFinished(Loader<Cursor> loader, Cursor data) {
    // Once cursor is loaded, give it to adapter
    mAdapter.swapCursor(data);
}

@Override
public void onLoaderReset(Loader<Cursor> loader) {
    // on reset take any old cursor away
    mAdapter.swapCursor(null);
}
}

然后在您的模板中而不是init() { this._super(...arguments); set(this, 'userData', Ember.Object.create()); }, actions: { submit: { // save form data to server, etc. set(this, 'userData', Ember.Object.create()); } }执行{{input id='name' value=name}}

我认为既然我们已经有了微光，就没有理由再打电话给{{input id='name' value=userData.name}}了。此方法不构建以替换或更新DOM，或在任何应用程序中用于常规用例。它的唯一目的是修复一些非常罕见的边缘情况。

对于每个通常的用例，ember都会让您的DOM自动与您的JS状态保持同步。所以你必须修复你的JS状态，而不是直接修复DOM。

即使你可以替换你的DOM，这对你的问题也没有帮助，因为你的JS状态仍然包含旧数据。

重新渲染组件＆＃39; Ember.js中的DOM

1 个答案: