ember组件在{{#each}}

时间:2015-10-08 03:08:49

标签: ember.js

跟随this CodePen可能会有所帮助。点击图标。

我有一个项目列表,每个项目使用ItemIndexComponent进行渲染,该项目具有属性controls,该属性是一个对象数组,每个对象描述一个要显示的图标,要采取的操作,以及州(真/假)。我们的想法是将控件传递给可配置的ToolboxMenuComponent,该组件没有关于要执行的操作和要显示的图标的任何逻辑。它从其子组件接收一个单击,它会传递相应的控制对象。

然后,工具箱切换控件上的状态,然后将该项与项目一起传递到ItemIndexComponent。然后检查控件以查看要在项目上更改的属性。这一切都很有效,除了......

我遇到的问题是相同的 controls数组被传递给每个项目。所以,如果我点击编辑图标,"编辑"该项目的属性发生变化 - 颜色变为绿色。但是,当我点击任何其他项目的编辑图标时,没有任何反应,因为"编辑"控制状态已经true,随后被切换,然后向上发送链,导致第二个项目没有变化,其状态已经是false。如果我再次单击第二个项目的图标,它会发生变化,当然,因为该状态之前已被切换过。

我理解发生了什么,但是我想知道如何用Ember来解决这个问题。如何在保持Toolbox不可知的同时将每个项目传递给自己的控件数组?也就是说,我希望它只知道controls具有这三个属性,state应该被切换,并且它应该传回item而不知道item的任何内容}也不切换item属性本身。 但是每个item应该有自己的controls,因此请注意每个控件的自身状态。

1 个答案:

答案 0 :(得分:1)

我发誓,每次我发布到SO时,都是徒劳无功的。然后,在整理问题的同时,我经历了六次尝试。然后我发布了,解决方案让我在眼睛之间晃来晃去。

因为ToolboxMenu已经知道了state属性所以使用它没有任何害处。答案是基于controls.state在子ToolboxMenuItem上设置实例属性,然后切换 并传递 链。现在,package radroid.droid_note; import android.content.ContentProvider; import android.content.ContentResolver; import android.content.ContentUris; import android.content.ContentValues; import android.content.Context; import android.content.UriMatcher; import android.database.Cursor; import android.database.sqlite.SQLiteOpenHelper; import android.net.Uri; import android.provider.ContactsContract; import android.support.annotation.NonNull; import android.text.TextUtils; import java.sql.SQLException; import radroid.droid_note.NoteDbContract.NoteEntry; /** * Created by Admin on 18.09.15. */ public class NoteProvider extends ContentProvider { Context context; private static final int NOTE_LIST = 1; private static final int NOTE_ID = 2; private static final UriMatcher sUriMatcher; static { sUriMatcher = new UriMatcher(UriMatcher.NO_MATCH); sUriMatcher.addURI(NoteDbContract.CONTENT_AUTHORITY, "notes", NOTE_LIST); sUriMatcher.addURI(NoteDbContract.CONTENT_AUTHORITY, "notes/#", NOTE_ID); } private SQLiteOpenHelper mSQLiteOpenHelper; @Override public boolean onCreate() { mSQLiteOpenHelper = new NoteDbHelper(getContext()); context = getContext(); return true; } public String getType(@NonNull Uri uri) { String type; switch (sUriMatcher.match(uri)) { case NOTE_LIST: type = NoteEntry.CONTENT_DIR_TYPE; break; case NOTE_ID: type = NoteEntry.CONTENT_ITEM_TYPE; break; default: throw new UnsupportedOperationException("Unknown type for uri: " + uri); } return type; } public Cursor query( Uri uri, String[] projection, String selection, String[] selectionArgs, String sortOrder) { Cursor retCursor; switch (sUriMatcher.match(uri)) { case NOTE_ID: retCursor = mSQLiteOpenHelper.getReadableDatabase().query(NoteEntry.TABLE_TITLE, projection, NoteEntry._ID + " = " + uri.getLastPathSegment(), selectionArgs, null, null, sortOrder); break; case NOTE_LIST: retCursor = mSQLiteOpenHelper.getReadableDatabase().query(NoteEntry.TABLE_TITLE, projection, selection, selectionArgs, null, null, sortOrder); break; default: throw new UnsupportedOperationException("Query operation failed - unknown uri:" + uri); } if (retCursor != null) { retCursor.setNotificationUri(context.getContentResolver(), uri); } else{ throw new UnsupportedOperationException("Query operation failed - retCursor is null - uri:" + uri); } return retCursor; } public Uri insert(@NonNull Uri uri, ContentValues contentValues) { long insertId; Uri retUri; insertId = mSQLiteOpenHelper.getWritableDatabase().insert(NoteEntry.TABLE_TITLE, NoteEntry._ID + " = " + uri.getLastPathSegment(), contentValues); if (insertId > 0) { retUri = ContentUris.withAppendedId(NoteEntry.CONTENT_URI, insertId); } else { throw new UnsupportedOperationException("Insert operation - failed" + uri); } context.getContentResolver().notifyChange(uri, null); return retUri; } @Override public int delete(@NonNull Uri uri, String selection, String[] selectionArgs) { int retDeleted = 0; switch (sUriMatcher.match(uri)) { case NOTE_ID: retDeleted = mSQLiteOpenHelper.getWritableDatabase().delete(NoteEntry.TABLE_TITLE, NoteEntry._ID + " = " + uri.getLastPathSegment(), null); break; case NOTE_LIST: retDeleted = mSQLiteOpenHelper.getWritableDatabase().delete(NoteEntry.TABLE_TITLE, selection, null); break; default: throw new UnsupportedOperationException("Delete operation failed - unknown uri: " + uri); } if (retDeleted != 0) { context.getContentResolver().notifyChange(uri, null); } else{ throw new UnsupportedOperationException("Delete operation failed - retDelete = 0 uri: " + uri); } return retDeleted; } @Override public int update(@NonNull Uri uri, ContentValues values, String selection, String[] selectionArgs) { int retRowsUpdated = 0; retRowsUpdated = mSQLiteOpenHelper.getWritableDatabase().update(NoteEntry.TABLE_TITLE, values, NoteEntry._ID + " = " + uri.getLastPathSegment(), null); if (retRowsUpdated != 0) { context.getContentResolver().notifyChange(uri, null); }else { throw new UnsupportedOperationException("Update operation failed - retRowsUpdate = 0 uri: " + uri); } return retRowsUpdated; } } 变为controls.state,恰好使用一次然后被忽略。只需要传递动作,而不是整个控制对象。

(我不得不使用defaultState作为子组件属性,因为Ember抱怨被弃用的mode成员。)

state