JQMにてlistviewの中にbuttonを表示させる

Listviewの中に、buttonを追加しようと思って、下記ではボタンの形はでてきない。

<div class="ui-block-d">
                            <a href="#" data-role="button" data-icon="gift">情報</a>
</div>

そこで、以下のように変更したところで、解決できた。

<div class="ui-block-d">
                            <a href="#" class="ui-btn ui-icon-gift ui-btn-icon-left">情報</a>
                        </div>

konckoutによるjquery mobile listviewへのbinding

いろいろ試した結果、いくつかの発見を纏める。
・checkboxをlabelの中に入れると、visible bindingが効かなくなる
・「$index」そのまま使うと、文字列操作の式でfunctionの文字列が使われる。0からの値で利用したい場合は「$index()」を使う

JS
var appViewModel = { cards: ko.observableArray([]),
                   addMode: ko.observable(false)};

ko.applyBindings(appViewModel);

HTML
 　　 <ul data-role="listview" id="card_list" data-inset="true" data-bind="foreach: cards">
                <li>
                    <a href="#">
                        <input type="checkbox" name ="card-to-add"
                                       data-bind="visible: $root.addMode,
                                                  attr: {id: 'checkbox-'+$index()}">
                        <label data-bind="attr: {for: 'checkbox-'+$index()}">
                            <span data-bind="text: CARDNAME"></span>
                        </label>
                    </a>
                </li>
            </ul>

Azure SQLのデータをListViewに表示させる

public class MainActivity extends Activity {

MobileServiceClient mClient;

MobileServiceTable<TokutenItem> mTokutenTable;

TokutenItemAdapter mAdapter;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.benefit_list);

// 1)ListViewとadapterを設定、rowのlayoutも紐づく

mAdapter = new TokutenItemAdapter(this, R.layout.benifit_cell);

ListView listViewBenefit = (ListView) findViewById(R.id.benefitList);

listViewBenefit.setAdapter(mAdapter);

try {

// 2)Create the Mobile Service Client instance, using the provided

// Mobile Service URL and key

mClient = new MobileServiceClient(

　　　　　　　 "https://xxxxxxx.azure-mobile.net/",

"keyforAzuraMobileService", 

this);

// 3)Get the Mobile Service Table instance to use

mTokutenTable = mClient.getTable(TokutenItem.class);

} catch (MalformedURLException e) {

createAndShowDialog(new Exception("There was an error creating the Mobile Service. Verify the URL"), "Error");

}

// 4)SQL実行

mTokutenTable.where().field("venusId").eq("4e25173e091a817e3dd67300")

.execute(new TableQueryCallback<TokutenItem>() {

　　　　　　　　　　　　　　　　　　　　　　　　　 // 5)SQL完了したあとのcallbackでadapterを更新

public void onCompleted(List<TokutenItem> result, 

        int count,

                Exception exception, 

                ServiceFilterResponse response) {   

   if (exception == null) {

mAdapter.clear();

        for (TokutenItem item : result) {

mAdapter.add(item);

}

   } else {

        createAndShowDialog(exception, "Error");

  }

        }

});

}

Adapterの設計

public class TokutenItemAdapter extends ArrayAdapter<TokutenItem>{

/**

* Adapter context

*/

Context mContext;

/**

* Adapter View layout

*/

int mLayoutResourceId;

public TokutenItemAdapter(Context context, int layoutResourceId) {
super(context, layoutResourceId);

mContext = context;
mLayoutResourceId = layoutResourceId;
}

@Override

public View getView(int position, View convertView, ViewGroup parent) {
View row = convertView;

final TokutenItem currentItem = getItem(position);

if (row == null) {//再利用できるrowがあるかどうかをチェック、なければ新規作成
LayoutInflater inflater = ((Activity) mContext).getLayoutInflater();
row = inflater.inflate(mLayoutResourceId, parent, false);
}

//rowのlayoutになにを表示させるかを設定

TextView pointTv = (TextView) row.findViewById(R.id.point);
TextView priceDownTv = (TextView) row.findViewById(R.id.priceDown);
pointTv.setText(Float.toString(currentItem.getPointUp()));
priceDownTv.setText(Integer.toString(currentItem.getPriceDown()));

return row;
}

}

AdapterのgetView()

ListViewに内容を表示させるには、AdapterはデータとListViewの中間役になります。Adapterの役割の中心は、getView()です。ListViewは新しいrowを表示する際、その都度getView()を呼び出します。

public abstract View getView (int position, View convertView, ViewGroup parent)

Added in API level 1

Get a View that displays the data at the specified position in the data set. You can either create a View manually or inflate it from an XML layout file. When the View is inflated, the parent View (GridView, ListView...) will apply default layout parameters unless you use inflate(int, android.view.ViewGroup, boolean) to specify a root view and to prevent attachment to the root.

Parameters

position	The position of the item within the adapter's data set of the item whose view we want.
convertView	The old view to reuse, if possible. Note: You should check that this view is non-null and of an appropriate type before using. If it is not possible to convert this view to display the correct data, this method can create a new view. Heterogeneous lists can specify their number of view types, so that this View is always of the right type (see getViewTypeCount() and getItemViewType(int)).
parent	The parent that this view will eventually be attached to

Returns

• A View corresponding to the data at the specified position.