Skip to content

ko.bindingHandlers.namePath #2

@smj0x

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>
``

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