Skip to content

ko.bindingHandlers.namePath #2

Description

@smj0x

ko.bindingHandlers.namePath doesn't seems to trigger i tried everything am i missing something here is a sample:

`var viewModel = createViewModel();
ko.applyBindings(viewModel);
ko.bindingHandlers.namePath = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
console.log("init-fired");
var jElement = $(element);
var parent = $(element).parents("fieldset")[0];
var parentIndex = $(parent).index() - 1;

        if (valueAccessor()) {

            var name = jElement.attr("name");
            var modifiedPath = name.replace("[0]", "[" + parentIndex + "]");
            element.name = modifiedPath;

            var id = jElement.attr("id");
            var modifiediD = id.replace("_0_", "_" + parentIndex + "_");
            element.id = modifiediD;

            // Workaround IE 6/7 issue
            // - https://github.com/SteveSanderson/knockout/issues/197
            // - http://www.matts411.com/post/setting_the_name_attribute_in_ie_dom/
            if (ko.utils.isIe6 || ko.utils.isIe7)
                element.mergeAttributes(document.createElement("<input name='" + element.name + "'/>"), false);
        }

        // Fix data-valmsg-for on labels to match
        $(element).parent().find(".field-validation-valid").each(function () {
            var item = $(this);
            var data = item.data();
            var modifiedValPath = data.valmsgFor.replace("[0]", "[" + parentIndex + "]");
            item.attr("data-valmsg-for", modifiedValPath);
        });
    },
    update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        console.log("init-fired");
        var jElement = $(element);
        var parent = $(element).parents("fieldset")[0];
        var parentIndex = $(parent).index() - 1;

        if (valueAccessor()) {

            var name = jElement.attr("name");
            var modifiedPath = name.replace("[0]", "[" + parentIndex + "]");
            element.name = modifiedPath;

            var id = jElement.attr("id");
            var modifiediD = id.replace("_0_", "_" + parentIndex + "_");
            element.id = modifiediD;

            // Workaround IE 6/7 issue
            // - https://github.com/SteveSanderson/knockout/issues/197
            // - http://www.matts411.com/post/setting_the_name_attribute_in_ie_dom/
            if (ko.utils.isIe6 || ko.utils.isIe7)
                element.mergeAttributes(document.createElement("<input name='" + element.name + "'/>"), false);
        }

        // Fix data-valmsg-for on labels to match
        $(element).parent().find(".field-validation-valid").each(function () {
            var item = $(this);
            var data = item.data();
            var modifiedValPath = data.valmsgFor.replace("[0]", "[" + parentIndex + "]");
            item.attr("data-valmsg-for", modifiedValPath);
        });
    }
};`

function createViewModel() {
var createPosition = function () {
return {
ContractorName: ko.observable(),
Iqama: ko.observable(),
Occupation: ko.observable(),
Attachment: ko.observable()
};
};

var addPosition = function () {
    Contractors.push(createPosition());
    //incrementPaths();
};
var removePosition = function () {
    Contractors.pop();
};


var ProvidedPostNumber = ko.observable();
var ProvidedJobsNumber = ko.observable();
var Departments = ko.observable();
var Contractors = ko.observableArray([createPosition()]).extend({ notify: 'always' });
return {
    ProvidedPostNumber: ProvidedPostNumber,
    ProvidedJobsNumber: ProvidedJobsNumber,
    Departments: Departments,
    Contractors: Contractors,
    addPosition: addPosition,
    removePosition: removePosition
};

}'

``@model ucp.Models.Contractor

<fieldset class="fieldset">
    <legend>Contractors</legend>
    <label asp-for="ContractorName" class="control-label"></label>
    <input asp-for="ContractorName" class="form-control" data_bind="value: ContractorName, namePath: true" />
    <span asp-validation-for="ContractorName" class="text-danger"></span>
    <label asp-for="Iqama" class="control-label"></label>
    <input asp-for="Iqama" class="form-control" data_bind="value: Iqama, namePath: true"  />
    <span asp-validation-for="Iqama" class="text-danger"></span>
    <label asp-for="Occupation" class="control-label"></label>
    <input asp-for="Occupation" class="form-control" data_bind="value: Occupation, namePath: true"  />
    <span asp-validation-for="Occupation" class="text-danger"></span>
    <label asp-for="Attachment" class="control-label"></label>
    <input type="file" asp-for="Attachment" class="form-control" data_bind="value: Attachment, namePath: true" />
    <span asp-validation-for="Attachment" class="text-danger"></span>
</fieldset>
``

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions