CODEWITHSUNDEEP
jqueryknockout.js
grilledtomatos
grilledtomatos

Reputation: 39

Show/hide template element with Knockout and jQuery

I have this:

<div data-bind="with: storeModel.stores()">
    <h1>Store count <span data-bind="text: '(' + $data.length + ')'"></span></h1>
    <ul id="stores" data-bind="foreach: $data">
        <li data-bind="text: Name, click: $root.storeModel.editStore"></li>
    </ul>
</div>

    <div id="editStore" data-bind="with: storeModel.currentEditItem()">
        <form data-bind="submit: $root.storeModel.saveStore" action="">
            <fieldset>
                <legend>Foo</legend>
                <label for="name">Name:</label>
                <input type="text" data-bind="value:Name" id="name" />
                <label for="address">Address:</label>
                <input type="text" data-bind="value:StreetAddress" id="address" />
                <label for="postalcode">Postal code:</label>
                <input type="text" data-bind="value:PostalCode" id="postalcode" />
                <label for="city">City:</label>
                <input type="text" data-bind="value:City" id="city" />
                <button style="display:block" type="submit" data-bind="jqButton: $data">Save</button>
            </fieldset>
        </form>
    </div>

p.editStore = function(store, event) {
            location.hash = 'Stores/Edit/' + ko.utils.unwrapObservable(store.StoreId);
            p.currentEditItem(store);

            //Append edit form to li, how?
        }

Now, I would like the click event on each li element to append an edit form onto said li. Is a template to keep the edit form a good idea here? Otherwise the edit form would need to be generated for each li I mean.

Or should a bindinghandler be used?

Coming mostly from jQuery, dealing with UI stuff in KO can be quite confusing. All answers are appreciated.

Upvotes: 0

Views: 3408

Answers (2)

Dmitry Zaets
Dmitry Zaets

Reputation: 3277

You could use If statement. It will dynamically add form to your li tag, instead of storing it there all the time.

 <li data-bind="text:$data, if: $data == selected ">

Here is a Short Example

Upvotes: 1

Matthew
Matthew

Reputation: 411

Can you post the rest of your knockout so we can see the data model you are working with?

Here is how I would handle that situation. You basically bind a template to a "Current Value". You just take turns showing/hiding the form but always passing in what is clicked. Your click handler would set the clicked item to the what the template is displaying and in my case I just show the dialog box. Example(Most of the code but you can get an idea hopefully)

<script type="text/x-jquery-tmpl" id="streamTemplate">
    <fieldset>
        <legend>Information</legend>
        <table style="width:100%">
            <tr>
                <td>
                    <label>Account: <span data-bind="text:AccountName"></span></label>
                </td>
                <td>
                    <label>MAC Address: <span data-bind="text:MAC"></span></label>
                </td>
            </tr>
            <tr>
                <td>
                    <label>Camera Model: <span data-bind="text:CameraModelName"></span></label>
                </td>
                <td>
                    <label>Channel: <span data-bind="text:Stream"></span></label>
                </td>
            <tr>
        </table>
    </fieldset>
</script>

<div id="dialog" data-bind="template: { name: 'streamTemplate', data: CurrentActivation()}">
</div>



<tbody data-bind="foreach: ActivationCodes">
        <tr>
            <td>
                <label data-bind="text: MAC()">
                </label>
            </td>
            <td>
                <label data-bind="text: AccountName()">
                </label>
            </td>
            <td>
                <button data-bind="click: $root.Activate">
                    Activate</button>
            </td>
        </tr>
<tbody>

<script>    
     function viewModel() {
        var self = this;

        self.filter = ko.observable("All");

        self.ActivationCode = ko.observable();

        self.ActivationCodes = ko.observableArray([]);

        self.CurrentActivation = ko.observable(new InactiveCamera("", "", "", "", "", "", "", "", ""));

        self.Activate = function (data) {
            self.CurrentActivation(data);
            $("#dialog").dialog("option", "title", "Activing Streams for: " + data.ActivationCode());
            $("#dialog").dialog("open");
            $("#dialog button").button();
        };
    }

    function format(date) {
        return date.getMonth() + "/" + date.getDay() + "/" + date.getFullYear() + " " + date.toLocaleTimeString();
    }

    $("#dialog").dialog({
        autoOpen: false,
        width: 600,
        height: 600,
        modal: true

    });

    ko.applyBindings(new viewModel());
</script>

Upvotes: 0

Related Questions